import { useEffect, useMemo, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { ImagePlus } from 'lucide-react';
import { adminApi, type FileRef, type TenantOption } from '@/api/adminApi';
import { Breadcrumb, Button, FileActions, Input, Select, Textarea } from '@/components/ui';

type EnterpriseForm = {
  name: string;
  creditCode: string;
  province: string;
  city: string;
  address: string;
  contactName: string;
  contactIdCard: string;
  contactPhone: string;
  contactEmail: string;
  photoFileObjectId: string;
  photoFileName: string;
  photoContentType: string;
};

type EnterpriseFormErrors = Partial<Record<keyof EnterpriseForm, string>>;

const provinceOptions = [
  { label: '请选择省/直辖市', value: '' },
  ...'北京,上海,广东,山东,河南,江苏,浙江,四川,重庆,湖北,湖南,陕西'.split(',').map((item) => ({ label: item, value: item })),
];

const cityOptionsByProvince: Record<string, Array<{ label: string; value: string }>> = {
  北京: [{ label: '北京市', value: '北京市' }],
  上海: [{ label: '上海市', value: '上海市' }],
  广东: ['广州市', '深圳市', '东莞市'].map((item) => ({ label: item, value: item })),
  山东: ['济南市', '青岛市', '烟台市'].map((item) => ({ label: item, value: item })),
  河南: ['郑州市', '洛阳市', '开封市'].map((item) => ({ label: item, value: item })),
  江苏: ['南京市', '苏州市', '无锡市'].map((item) => ({ label: item, value: item })),
  浙江: ['杭州市', '宁波市', '温州市'].map((item) => ({ label: item, value: item })),
  四川: ['成都市', '绵阳市', '德阳市'].map((item) => ({ label: item, value: item })),
  重庆: [{ label: '重庆市', value: '重庆市' }],
  湖北: ['武汉市', '宜昌市', '襄阳市'].map((item) => ({ label: item, value: item })),
  湖南: ['长沙市', '株洲市', '湘潭市'].map((item) => ({ label: item, value: item })),
  陕西: ['西安市', '咸阳市', '宝鸡市'].map((item) => ({ label: item, value: item })),
};

const emptyForm: EnterpriseForm = {
  name: '',
  creditCode: '',
  province: '',
  city: '',
  address: '',
  contactName: '',
  contactIdCard: '',
  contactPhone: '',
  contactEmail: '',
  photoFileObjectId: '',
  photoFileName: '',
  photoContentType: '',
};

function formFromTenant(tenant: TenantOption): EnterpriseForm {
  const profile = tenant.enterpriseProfile;
  return {
    name: tenant.name,
    creditCode: profile?.creditCode ?? '',
    province: profile?.province ?? '',
    city: profile?.city ?? '',
    address: profile?.address ?? '',
    contactName: profile?.contactName ?? '',
    contactIdCard: profile?.contactIdCard ?? '',
    contactPhone: profile?.contactPhone ?? '',
    contactEmail: profile?.contactEmail ?? '',
    photoFileObjectId: profile?.photoFileObjectId ?? '',
    photoFileName: profile?.photoFileObjectId ? '已上传企业照片' : '',
    photoContentType: '',
  };
}

export function AdminCustomerFormPage() {
  const navigate = useNavigate();
  const { enterpriseId } = useParams();
  const isEdit = Boolean(enterpriseId);
  const [form, setForm] = useState<EnterpriseForm>(emptyForm);
  const [errors, setErrors] = useState<EnterpriseFormErrors>({});
  const [error, setError] = useState('');
  const [saving, setSaving] = useState(false);
  const [uploadingPhoto, setUploadingPhoto] = useState(false);

  useEffect(() => {
    if (!enterpriseId) {
      setForm(emptyForm);
      return;
    }
    adminApi.getTenant(enterpriseId)
      .then((tenant) => {
        setForm(formFromTenant(tenant));
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '企业信息加载失败'));
  }, [enterpriseId]);

  const cityOptions = useMemo(() => [
    { label: '请选择市/区', value: '' },
    ...(cityOptionsByProvince[form.province] ?? []),
  ], [form.province]);

  function updateForm<K extends keyof EnterpriseForm>(key: K, value: EnterpriseForm[K]) {
    setForm((current) => ({
      ...current,
      [key]: value,
      ...(key === 'province' ? { city: '' } : {}),
    }));
    setErrors((current) => ({ ...current, [key]: undefined }));
  }

  function validateForm() {
    const nextErrors: EnterpriseFormErrors = {};
    if (!form.name.trim()) nextErrors.name = '请填写企业名称';
    if (!form.creditCode.trim()) nextErrors.creditCode = '请填写统一社会信用代码';
    if (!form.contactName.trim()) nextErrors.contactName = '请填写联系人姓名';
    if (!form.contactPhone.trim()) nextErrors.contactPhone = '请填写手机号';
    setErrors(nextErrors);
    return Object.keys(nextErrors).length === 0;
  }

  function submitForm() {
    if (!validateForm()) return;
    setSaving(true);
    const { photoContentType, photoFileName, ...payload } = form;
    const request = isEdit && enterpriseId
      ? adminApi.updateTenant(enterpriseId, payload)
      : adminApi.createTenant(payload);
    request
      .then(() => navigate('/admin/customers'))
      .catch((failure: Error) => setError(failure.message || '企业保存失败'))
      .finally(() => setSaving(false));
  }

  function uploadEnterprisePhoto(file: File | undefined) {
    if (!file) return;
    setUploadingPhoto(true);
    adminApi.uploadFileObject(file, { purpose: 'enterprise_photo', prefix: 'enterprise-photos' })
      .then((fileObject) => {
        setForm((current) => ({
          ...current,
          photoContentType: fileObject.contentType,
          photoFileObjectId: fileObject.id,
          photoFileName: fileObject.fileName,
        }));
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '企业照片上传失败'))
      .finally(() => setUploadingPhoto(false));
  }

  const photoFile: FileRef | null = form.photoFileObjectId
    ? { contentType: form.photoContentType, fileName: form.photoFileName || '企业照片', fileObjectId: form.photoFileObjectId }
    : null;

  return (
    <section className="page-stack enterprise-form-page">
      <div className="page-heading">
        <div>
          <Breadcrumb items={[isEdit ? '编辑企业' : '创建企业']} />
          <p>填写企业基本信息、证照地址和联系人信息，保存到真实企业档案。</p>
        </div>
      </div>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="surface enterprise-form-card">
        <section className="ui-detail-section">
          <div className="ui-detail-section__header">
            <div>
              <h3>基本信息</h3>
              <p>企业主体、证照识别和通讯地址。</p>
            </div>
          </div>

          <div className="enterprise-upload-panel">
            <span>企业照片</span>
            <label className="enterprise-upload-button">
              <ImagePlus size={28} />
              {uploadingPhoto ? '上传中...' : form.photoFileName || '上传企业照片'}
              <input
                accept="image/png,image/jpeg,image/webp"
                disabled={uploadingPhoto}
                onChange={(event) => uploadEnterprisePhoto(event.target.files?.[0])}
                style={{ display: 'none' }}
                type="file"
              />
            </label>
            <FileActions file={photoFile} />
            <p>{form.photoFileObjectId ? `文件对象：${form.photoFileObjectId}` : '支持 JPG、PNG、WebP，上传后随企业档案保存。'}</p>
          </div>

          <div className="form-grid form-grid--two">
            <Input error={errors.name} label="企业名称" onChange={(event) => updateForm('name', event.target.value)} placeholder="请填写企业全称" required value={form.name} />
            <Input
              error={errors.creditCode}
              hint="修改此项将同步更新该企业档案。"
              label="统一社会信用代码"
              onChange={(event) => updateForm('creditCode', event.target.value)}
              placeholder="请填写统一社会信用代码或纳税识别号"
              required
              value={form.creditCode}
            />
          </div>

          <div className="form-grid form-grid--two">
            <Select label="省/直辖市" onChange={(event) => updateForm('province', event.target.value)} options={provinceOptions} value={form.province} />
            <Select label="市/区" onChange={(event) => updateForm('city', event.target.value)} options={cityOptions} value={form.city} />
          </div>

          <Textarea
            hint="通讯地址可以与营业执照上的地址不一致。"
            label="通讯地址"
            onChange={(event) => updateForm('address', event.target.value)}
            placeholder="请填写详细通讯地址"
            rows={4}
            value={form.address}
          />
        </section>

        <section className="ui-detail-section">
          <div className="ui-detail-section__header">
            <div>
              <h3>联系人信息</h3>
              <p>建议填写联系人（法人或财务主管）的真实信息。</p>
            </div>
          </div>

          <div className="enterprise-info-tip">
            为方便给企业提供更好的服务，建议填写联系人（法人或财务主管）的真实信息。
          </div>

          <div className="form-grid form-grid--two">
            <Input error={errors.contactName} label="联系人姓名" onChange={(event) => updateForm('contactName', event.target.value)} placeholder="请填写企业联系人姓名" required value={form.contactName} />
            <Input label="身份证号" onChange={(event) => updateForm('contactIdCard', event.target.value)} placeholder="请填写企业联系人身份证号" value={form.contactIdCard} />
          </div>

          <div className="form-grid form-grid--two">
            <Input error={errors.contactPhone} label="手机号" onChange={(event) => updateForm('contactPhone', event.target.value)} placeholder="请填写企业联系人手机号" required value={form.contactPhone} />
            <Input label="电子邮箱" onChange={(event) => updateForm('contactEmail', event.target.value)} placeholder="请填写企业联系人邮箱" type="email" value={form.contactEmail} />
          </div>
        </section>

        <div className="enterprise-form-footer">
          <Button disabled={saving} onClick={submitForm}>{saving ? '保存中...' : isEdit ? '保存企业' : '创建企业'}</Button>
          <Button onClick={() => navigate('/admin/customers')} variant="ghost">取消</Button>
        </div>
      </div>
    </section>
  );
}