// ============================================================
// list-upload-widgets — 多文件拖拽上传控件
// 合并自 ImageListInput.tsx + AudioListInput.tsx
//
// 两者几乎完全相同（Upload.Dragger 包装），
// 仅默认扩展名、accept 后缀、文案不同。
// ============================================================

import { Upload } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import type { UploadFile } from 'antd/es/upload';
import type { WidgetProps } from './types';
import { useFileUpload } from '@/shared/hooks/use-api';
import { buildAccept, createMediaBeforeUpload, VIDEO_EXTENSIONS } from '@/shared/utils/media-upload';

const { Dragger } = Upload;

// ════ DraggerUpload 内部组件 ════

interface DraggerUploadProps {
   value: unknown;
   onChange: WidgetProps['onChange'];
   disabled: boolean;
   config: Record<string, unknown>;
   /** 'image' | 'audio' */
   mediaType: 'image' | 'audio';
   defaultAccept: string;
   defaultFiltersLabel: string;
   defaultMaxSizeMb: number;
   label: string;
}

function DraggerUpload({
   value,
   onChange,
   disabled,
   config,
   mediaType,
   defaultAccept,
   defaultFiltersLabel,
   defaultMaxSizeMb,
   label,
}: DraggerUploadProps) {
   const fileList = (value as UploadFile[]) || [];
   const maxSizeMb = (config.maxFileSizeMb as number) || defaultMaxSizeMb;
   const maxCount = (config.maxFiles as number) || 10;
   const filters = config.fileFilter as string[] | undefined;
   const hasVideo = mediaType === 'image' && filters?.some(f => VIDEO_EXTENSIONS.has(f.toLowerCase()));

   const { customRequest } = useFileUpload();
   const mediaLabel = hasVideo ? '图片/视频' : label;

   const accept = mediaType === 'audio'
      ? (filters ? filters.map((ext) => `.${ext}`).join(',') : defaultAccept)
      : buildAccept(filters);

   const beforeUpload = mediaType === 'audio'
      ? () => true
      : createMediaBeforeUpload(maxSizeMb, filters);

   return (
      <Dragger
         multiple
         listType="picture"
         accept={accept}
         fileList={fileList}
         customRequest={customRequest}
         onChange={({ fileList: newList }) => onChange?.(newList)}
         disabled={disabled}
         beforeUpload={beforeUpload}
         maxCount={maxCount}
      >
         <p className="ant-upload-drag-icon"><InboxOutlined /></p>
         <p className="ant-upload-text">点击或拖拽{mediaLabel}到此区域上传</p>
         <p className="ant-upload-hint">
            支持 {filters?.join(' / ').toUpperCase() || defaultFiltersLabel}
            ，单文件不超过 {maxSizeMb}MB
         </p>
      </Dragger>
   );
}

// ════ 公开导出（保持原组件名兼容 WIDGET_MAP） ════

export function ImageListInput(props: WidgetProps) {
   const { value, onChange, disabled, config } = props;
   return (
      <DraggerUpload
         value={value}
         onChange={onChange}
         disabled={disabled ?? false}
         config={config}
         mediaType="image"
         defaultAccept="image/png,image/jpg,image/jpeg,image/webp"
         defaultFiltersLabel="PNG / JPG / WebP"
         defaultMaxSizeMb={10}
         label="图片"
      />
   );
}

export function AudioListInput(props: WidgetProps) {
   const { value, onChange, disabled, config } = props;
   return (
      <DraggerUpload
         value={value}
         onChange={onChange}
         disabled={disabled ?? false}
         config={config}
         mediaType="audio"
         defaultAccept=".wav,.mp3,.m4a,.flac"
         defaultFiltersLabel="WAV / MP3 / M4A / FLAC"
         defaultMaxSizeMb={10}
         label="音频"
      />
   );
}
