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

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

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={(file) => {
            const isImage = file.type.startsWith('image/');
            if (!isImage) {
               message.error('只能上传图片文件');
               return Upload.LIST_IGNORE;
            }
            if (file.size / 1024 / 1024 >= maxSizeMb) {
               message.error(`图片大小不能超过 ${maxSizeMb}MB`);
               return Upload.LIST_IGNORE;
            }
            return false;
         }}
         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>
   );
}