hms/apps/web/src/components/MediaPicker/index.tsx

import { useState, useEffect, useCallback } from 'react';
import { Modal, Input, Upload, Image, Empty, Spin, message } from 'antd';
import { SearchOutlined, UploadOutlined } from '@ant-design/icons';
import { resolveMediaUrl } from '../../utils/media';
import { mediaApi, type MediaItem } from '../../api/health/media';
import { uploadFile } from '../../api/upload';

interface MediaPickerProps {
  open: boolean;
  onClose: () => void;
  onSelect: (url: string, item?: MediaItem) => void;
  accept?: string;
}

const PAGE_SIZE = 20;

export default function MediaPicker({ open, onClose, onSelect, accept = 'image/*' }: MediaPickerProps) {
  const [items, setItems] = useState<MediaItem[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [keyword, setKeyword] = useState('');
  const [loading, setLoading] = useState(false);
  const [uploading, setUploading] = useState(false);

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const result = await mediaApi.list({
        page,
        page_size: PAGE_SIZE,
        keyword: keyword || undefined,
        content_type: accept === 'image/*' ? 'image' : undefined,
      });
      setItems(result.data);
      setTotal(result.total);
    } catch {
      setItems([]);
    } finally {
      setLoading(false);
    }
  }, [page, keyword, accept]);

  useEffect(() => {
    if (open) loadData();
  }, [open, loadData]);

  const handleUpload = async (file: File) => {
    setUploading(true);
    try {
      await uploadFile(file);
      message.success('上传成功');
      await loadData();
    } catch {
      message.error('上传失败');
    } finally {
      setUploading(false);
    }
    return false;
  };

  const handleSelect = (item: MediaItem) => {
    const url = resolveMediaUrl(item.storage_path);
    onSelect(url, item);
    onClose();
  };

  const totalPages = Math.ceil(total / PAGE_SIZE);

  return (
    <Modal
      title="选择媒体文件"
      open={open}
      onCancel={onClose}
      footer={null}
      width={720}
      destroyOnHidden
    >
      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
        <Input
          prefix={<SearchOutlined />}
          placeholder="搜索文件名..."
          value={keyword}
          onChange={(e) => { setKeyword(e.target.value); setPage(1); }}
          allowClear
          style={{ flex: 1 }}
        />
        <Upload
          accept={accept}
          showUploadList={false}
          beforeUpload={(file) => { handleUpload(file); return false; }}
        >
          <button
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 4,
              padding: '4px 15px', borderRadius: 6, border: '1px solid #d9d9d9',
              background: '#fff', cursor: 'pointer', fontSize: 14,
            }}
            disabled={uploading}
          >
            {uploading ? <Spin size="small" /> : <UploadOutlined />}
            上传
          </button>
        </Upload>
      </div>

      {loading ? (
        <div style={{ textAlign: 'center', padding: 40 }}><Spin /></div>
      ) : items.length === 0 ? (
        <Empty description="暂无媒体文件" />
      ) : (
        <>
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(4, 1fr)',
              gap: 12,
              maxHeight: 400,
              overflowY: 'auto',
            }}
          >
            {items.map((item) => (
              <div
                key={item.id}
                onClick={() => handleSelect(item)}
                style={{
                  cursor: 'pointer',
                  borderRadius: 8,
                  overflow: 'hidden',
                  border: '1px solid #f0f0f0',
                  background: '#fafafa',
                  transition: 'border-color 0.2s',
                }}
                onMouseEnter={(e) => { (e.currentTarget.style.borderColor = '#1677ff'); }}
                onMouseLeave={(e) => { (e.currentTarget.style.borderColor = '#f0f0f0'); }}
              >
                <div style={{ width: '100%', height: 100, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {item.content_type.startsWith('image/') ? (
                    <Image
                      src={resolveMediaUrl(item.thumbnail_path || item.storage_path)}
                      alt={item.alt_text || item.filename}
                      style={{ maxWidth: '100%', maxHeight: 100, objectFit: 'cover' }}
                      preview={false}
                      fallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IiNlOGU4ZTgiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzk5OSIgZm9udC1zaXplPSIxMiI+PC90ZXh0Pjwvc3ZnPg=="
                    />
                  ) : (
                    <span style={{ color: '#999', fontSize: 12 }}>{item.content_type.split('/')[1]}</span>
                  )}
                </div>
                <div
                  style={{
                    padding: '4px 8px',
                    fontSize: 11,
                    color: '#666',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                  }}
                  title={item.filename}
                >
                  {item.filename}
                </div>
              </div>
            ))}
          </div>
          {totalPages > 1 && (
            <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 12, alignItems: 'center' }}>
              <button
                disabled={page <= 1}
                onClick={() => setPage((p) => p - 1)}
                style={{ padding: '4px 12px', borderRadius: 4, border: '1px solid #d9d9d9', cursor: page <= 1 ? 'default' : 'pointer' }}
              >
                上一页
              </button>
              <span style={{ fontSize: 13, color: '#666' }}>{page} / {totalPages}</span>
              <button
                disabled={page >= totalPages}
                onClick={() => setPage((p) => p + 1)}
                style={{ padding: '4px 12px', borderRadius: 4, border: '1px solid #d9d9d9', cursor: page >= totalPages ? 'default' : 'pointer' }}
              >
                下一页
              </button>
            </div>
          )}
        </>
      )}
    </Modal>
  );
}