import { useEffect, useState } from 'react';
import { Info } from 'lucide-react';
import { adminApi, type ApplicationReportField } from '@/api/adminApi';
import { Button, Input, Modal, Textarea } from '@/components/ui';
import { formatDateTime } from '@/utils/dateTime';
import { DynamicReportFields } from './SignatureMaterialFields';
import { hasMissingRequiredReportValue } from './signature.helpers';
import type { DrainageInfo, UploadedFileRef } from './signature.types';

export function DrainageFormModal({ applicationId, item, onClose, onSubmit }: { applicationId?: string | null; item?: DrainageInfo; onClose: () => void; onSubmit: (item: DrainageInfo) => void }) {
  const [reportFields, setReportFields] = useState<ApplicationReportField[]>([]);
  const [form, setForm] = useState<DrainageInfo>(() => item ?? {
    id: `drain-${Date.now()}`,
    siteName: '',
    url: '',
    field1File: null,
    field2: '',
    field3: '',
    field4: '',
    field5: '',
    field6: '',
    field7File: null,
    field8: '',
    field9: '',
    field10: '',
    mobile: 'filing',
    unicom: 'filing',
    telecom: 'filing',
    submittedAt: formatDateTime(new Date()),
    remark: '',
    reportValues: {},
  });

  useEffect(() => {
    const request = applicationId
      ? adminApi.listApplicationReportFields(applicationId, 'drainage')
      : adminApi.listCommonApplicationReportFields('drainage');
    request.then(setReportFields).catch(() => setReportFields([]));
  }, [applicationId]);

  function update<Key extends keyof DrainageInfo>(key: Key, value: DrainageInfo[Key]) {
    setForm((current) => ({ ...current, [key]: value }));
  }

  function updateReportValue(code: string, value: string | UploadedFileRef | null) {
    setForm((current) => ({ ...current, reportValues: { ...current.reportValues, [code]: value } }));
  }

  return (
    <Modal
      footer={(
        <>
          <Button onClick={onClose} variant="ghost">取消</Button>
          <Button disabled={!form.url || hasMissingRequiredReportValue(reportFields, form.reportValues)} onClick={() => onSubmit(form)}>保存</Button>
        </>
      )}
      onClose={onClose}
      open
      size="xl"
      title={item ? '编辑引流信息' : '添加引流信息'}
    >
      <div className="signature-form drainage-edit-form">
        <section>
          <h3>基本信息</h3>
          <Input
            label="* 引流url或号码"
            onChange={(event) => update('url', event.target.value)}
            placeholder="请输入引流url或号码"
            required
            value={form.url}
          />
          <div className="signature-alert drainage-form-note">
            <Info size={18} />
            <ol>
              <li>本页面中所填的信息需与短信内容应用所包含的网站或服务保持一致；</li>
              <li>图片仅支持 PNG、JPG 或 JPEG 格式的正版文件，且大小不超过 3M；</li>
              <li>文件格式支持 PDF 格式或者图片，且大小不超过 10M。</li>
            </ol>
          </div>
          <div className="signature-form-grid">
            <Textarea className="signature-form-grid__wide" label="备注" onChange={(event) => update('remark', event.target.value)} rows={4} value={form.remark} />
          </div>
          <DynamicReportFields fields={reportFields} onChange={updateReportValue} title="引流信息报备资料（通用 + 通道）" values={form.reportValues} />
        </section>
      </div>
    </Modal>
  );
}