// ============================================================
// ImageListInput — imageList → Dragger（多张图片拖拽上传）
// 用于图生图模型的多图输入场景
// ============================================================

import { Upload } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import type { UploadFile } from 'antd/es/upload';
import type { WidgetProps } from './types';
import { createImageBeforeUpload } from './uploadValidation';

const { Dragger } = Upload;

export function ImageListInput({ value, onChange, disabled, config }: WidgetProps) {
   const fileList = (value as UploadFile[]) || [];
   const maxSizeMb = (config.maxFileSizeMb as number) || 10;
   const maxCount = (config.maxFiles as number) || 10;
   const filters = config.fileFilter as string[] | undefined;

   return (
      <Dragger
         multiple
         listType="picture"
         accept={
            filters
               ? filters.map((ext) => `image/${ext}`).join(',')
               : 'image/png,image/jpg,image/jpeg,image/webp'
         }
         fileList={fileList}
         onChange={({ fileList: newList }) => onChange?.(newList)}
         disabled={disabled}
         beforeUpload={createImageBeforeUpload(maxSizeMb)}
         maxCount={maxCount}
      >
         <p className="ant-upload-drag-icon">
            <InboxOutlined />
         </p>
         <p className="ant-upload-text">点击或拖拽图片到此区域上传</p>
         <p className="ant-upload-hint">
            支持 {filters?.join(' / ').toUpperCase() || 'PNG / JPG / WebP'}
            ，单张不超过 {maxSizeMb}MB
         </p>
      </Dragger>
   );
}