import { useEffect, useState } from 'react';
import { AlertCircle, Check, ChevronRight, Landmark, ShieldCheck, Upload, UserCheck } from 'lucide-react';
import { Button, FileActions, Input, Select, Textarea } from '@/components/ui';
import { clientApi, type EnterpriseCertification, type FileObject, type FileRef } from '@/api/adminApi';
import { displayFileName } from '@/utils/fileName';

type AuthStep = 'overview' | 'profile' | 'method' | 'recharge' | 'face' | 'faceScan' | 'pending' | 'success' | 'failed';
type AuthMethod = 'face' | 'recharge';
type CertificationStatus = 'uncertified' | 'pending' | 'approved' | 'rejected';

const companyInfo = {
  name: '上海闪联九玖信息通信技术有限公司',
  code: 'XXXXXXXXXX',
  legalPerson: '张三',
  certifiedAt: '2022年07月09日 13:12:01',
  address: '上海XXX区XX路XX号',
};

type CertificationForm = {
  companyName: string;
  licenseNo: string;
  province: string;
  city: string;
  address: string;
  contactName: string;
  contactIdCard: string;
  contactPhone: string;
  contactEmail: string;
  legalPerson: string;
  legalPersonIdCard: string;
};

const emptyCertificationForm: CertificationForm = {
  companyName: '',
  licenseNo: '',
  province: '',
  city: '',
  address: '',
  contactName: '',
  contactIdCard: '',
  contactPhone: '',
  contactEmail: '',
  legalPerson: '',
  legalPersonIdCard: '',
};

function UploadPanel({
  file,
  uploading,
  onFile,
}: {
  file: FileObject | null;
  uploading: boolean;
  onFile: (file: File | undefined) => void;
}) {
  const fileRef: FileRef | null = file
    ? { contentType: file.contentType, fileName: file.fileName, fileObjectId: file.id }
    : null;

  return (
    <label className="enterprise-upload">
      <Upload size={38} />
      <strong>{uploading ? '上传中...' : file ? displayFileName(file.fileName) : '点击上传'}</strong>
      <FileActions file={fileRef} portal="client" />
      <input
        accept="image/png,image/jpeg,image/webp,application/pdf"
        disabled={uploading}
        onChange={(event) => onFile(event.target.files?.[0])}
        style={{ display: 'none' }}
        type="file"
      />
    </label>
  );
}

function EnterpriseStepper({ current }: { current: number }) {
  const steps = ['填写资料', '选择认证方式', '校验认证信息', '认证完成'];

  return (
    <div className="enterprise-stepper">
      {steps.map((label, index) => {
        const step = index + 1;
        const complete = step < current;
        const active = step === current;

        return (
          <div className="enterprise-stepper__item" key={label}>
            <span
              className={['enterprise-stepper__dot', complete ? 'is-complete' : '', active ? 'is-active' : '']
                .filter(Boolean)
                .join(' ')}
            >
              {complete ? <Check size={20} /> : step}
            </span>
            <strong className={active || complete ? 'is-active' : ''}>{label}</strong>
            {index < steps.length - 1 ? <ChevronRight className="enterprise-stepper__arrow" size={22} /> : null}
          </div>
        );
      })}
    </div>
  );
}

function AuthHeader({ status }: { status: CertificationStatus }) {
  const statusText: Record<CertificationStatus, string> = {
    uncertified: '未认证',
    pending: '审核中',
    approved: '已通过',
    rejected: '未通过',
  };

  return (
    <div className="system-page-toolbar">
      <div className="sms-send-title">
        <span className="sms-send-title__icon">
          <ShieldCheck size={22} />
        </span>
        <h1>企业认证</h1>
      </div>
      <span className={`enterprise-review-status enterprise-review-status--${status}`}>{statusText[status]}</span>
    </div>
  );
}

function statusFromCertification(certification: EnterpriseCertification | null): CertificationStatus {
  if (!certification) {
    return 'uncertified';
  }
  if (certification.status === 'approved') {
    return 'approved';
  }
  if (certification.status === 'rejected') {
    return 'rejected';
  }
  return 'pending';
}

export function ClientEnterpriseAuthPage() {
  const [step, setStep] = useState<AuthStep>('overview');
  const [method, setMethod] = useState<AuthMethod>('face');
  const [status, setStatus] = useState<CertificationStatus>('uncertified');
  const [form, setForm] = useState<CertificationForm>(emptyCertificationForm);
  const [latestCertification, setLatestCertification] = useState<EnterpriseCertification | null>(null);
  const [licenseFile, setLicenseFile] = useState<FileObject | null>(null);
  const [uploading, setUploading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');

  const currentStep =
    step === 'profile'
      ? 1
      : step === 'method'
        ? 2
        : step === 'recharge' || step === 'face' || step === 'faceScan'
          ? 3
          : step === 'pending' || step === 'success' || step === 'failed'
            ? 4
            : 1;
  const certificationMaterials = latestCertification?.materials ?? {};
  const displayCompany = latestCertification?.companyName || form.companyName || companyInfo.name;
  const displayLicenseNo = latestCertification?.licenseNo || form.licenseNo || companyInfo.code;
  const displayAddress = String(certificationMaterials.address ?? (form.address || companyInfo.address));
  const displayLegalPerson = String(
    certificationMaterials.legalPerson ?? (form.legalPerson || companyInfo.legalPerson),
  );

  function loadCertification() {
    clientApi
      .listEnterpriseCertifications()
      .then((items) => {
        const latest = items[0] ?? null;
        setLatestCertification(latest);
        setStatus(statusFromCertification(latest));
        if (latest) {
          const materials = latest.materials ?? {};
          setForm({
            companyName: latest.companyName ?? '',
            licenseNo: latest.licenseNo ?? '',
            province: String(materials.province ?? ''),
            city: String(materials.city ?? ''),
            address: String(materials.address ?? ''),
            contactName: latest.contactName ?? '',
            contactIdCard: String(materials.contactIdCard ?? ''),
            contactPhone: latest.contactPhone ?? '',
            contactEmail: String(materials.contactEmail ?? ''),
            legalPerson: String(materials.legalPerson ?? ''),
            legalPersonIdCard: String(materials.legalPersonIdCard ?? ''),
          });
        }
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '企业认证信息加载失败'));
  }

  useEffect(() => {
    loadCertification();
  }, []);

  function updateForm<K extends keyof CertificationForm>(key: K, value: CertificationForm[K]) {
    setForm((current) => ({ ...current, [key]: value }));
  }

  function uploadLicense(file: File | undefined) {
    if (!file) return;
    setUploading(true);
    clientApi
      .uploadFileObject(file, { purpose: 'enterprise_certification', prefix: 'enterprise-certifications/license' })
      .then((fileObject) => {
        setLicenseFile(fileObject);
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '营业执照上传失败'))
      .finally(() => setUploading(false));
  }

  function submitCertification() {
    if (!form.companyName.trim() || !form.licenseNo.trim() || !form.contactName.trim() || !form.contactPhone.trim()) {
      setError('请填写企业名称、统一社会信用代码、联系人姓名和联系人手机号');
      setStep('profile');
      return;
    }
    setSubmitting(true);
    clientApi
      .submitEnterpriseCertification({
        companyName: form.companyName.trim(),
        licenseNo: form.licenseNo.trim(),
        contactName: form.contactName.trim(),
        contactPhone: form.contactPhone.trim(),
        materials: {
          licenseFileObjectId: licenseFile?.id,
          licenseFileName: licenseFile?.fileName,
          licenseFileContentType: licenseFile?.contentType,
          province: form.province,
          city: form.city,
          address: form.address,
          contactIdCard: form.contactIdCard,
          contactEmail: form.contactEmail,
          legalPerson: form.legalPerson,
          legalPersonIdCard: form.legalPersonIdCard,
          authMethod: method,
        },
      })
      .then((created) => {
        setLatestCertification(created);
        setStatus('pending');
        setStep('pending');
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '企业认证提交失败'))
      .finally(() => setSubmitting(false));
  }

  if (step === 'overview') {
    const overviewCopy =
      status === 'approved'
        ? '企业认证已审核通过，可正常使用发送、签名报备等能力。'
        : status === 'pending'
          ? '企业认证资料已提交，平台运营将在 1 个工作日内完成审核。'
          : status === 'rejected'
            ? '企业认证未通过，请根据驳回原因修改资料后重新提交。'
            : '您还未进行企业认证';

    return (
      <section className="page-stack enterprise-page">
        <AuthHeader status={status} />
        {error ? <p className="form-error">{error}</p> : null}

        <div className={`surface enterprise-status-card enterprise-status-card--${status}`}>
          <strong>{overviewCopy}</strong>
          {status === 'pending' ? (
            <button type="button" onClick={() => setStep('pending')}>
              查看审核进度 &gt;
            </button>
          ) : null}
        </div>

        <div className="surface enterprise-info-card">
          <dl>
            <div>
              <dt>企业名称：</dt>
              <dd>{latestCertification ? displayCompany : '待认证'}</dd>
            </div>
            <div>
              <dt>认证时间：</dt>
              <dd>{latestCertification?.reviewedAt ?? latestCertification?.submittedAt ?? '待审核完成'}</dd>
            </div>
            <div>
              <dt>统一社会信用代码：</dt>
              <dd>{latestCertification ? displayLicenseNo : '待认证'}</dd>
            </div>
            <div>
              <dt>通讯地址：</dt>
              <dd>{latestCertification ? displayAddress : '待认证'}</dd>
            </div>
            <div>
              <dt>法定代表人：</dt>
              <dd>{latestCertification ? displayLegalPerson : '待认证'}</dd>
            </div>
          </dl>
        </div>
      </section>
    );
  }

  return (
    <section className="page-stack enterprise-page">
      <h1 className="enterprise-page-title">企业认证</h1>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="surface enterprise-flow-card">
        <EnterpriseStepper current={currentStep} />

        {step === 'profile' ? (
          <div className="enterprise-form-panel">
            <label className="enterprise-required">营业执照</label>
            <UploadPanel file={licenseFile} onFile={uploadLicense} uploading={uploading} />
            <p className="enterprise-help">请上传电子版营业执照，JPG或PNG格式，大小不超过5M</p>

            <Input
              label="* 企业名称"
              onChange={(event) => updateForm('companyName', event.target.value)}
              placeholder="请填写企业全称"
              hint="请严格按照营业执照上的企业名称进行填写"
              value={form.companyName}
            />
            <Input
              label="* 统一社会信用代码/其他组织机构代码"
              onChange={(event) => updateForm('licenseNo', event.target.value)}
              placeholder="请填写统一社会信用代码（若无请填写其他组织机构代码）"
              value={form.licenseNo}
            />

            <div className="enterprise-address-selects">
              <span>* 通讯地址</span>
              <div>
                <Select
                  onChange={(event) => updateForm('province', event.target.value)}
                  options={[
                    { label: '请选择省/直辖市', value: '' },
                    { label: '上海市', value: '上海市' },
                    { label: '北京市', value: '北京市' },
                    { label: '山东省', value: '山东省' },
                    { label: '河南省', value: '河南省' },
                  ]}
                  value={form.province}
                />
                <Select
                  onChange={(event) => updateForm('city', event.target.value)}
                  options={[
                    { label: '请选择', value: '' },
                    { label: '浦东新区', value: 'pudong' },
                    { label: '徐汇区', value: 'xuhui' },
                    { label: '济南市', value: '济南市' },
                    { label: '郑州市', value: '郑州市' },
                  ]}
                  value={form.city}
                />
              </div>
            </div>
            <Textarea
              onChange={(event) => updateForm('address', event.target.value)}
              placeholder="请填写详细的通讯地址，可与证件上的地址不一致"
              rows={5}
              value={form.address}
            />

            <p className="enterprise-form-note">为方便沟通企业进展情况，需补充联系人（法人或员工都可）信息</p>
            <Input
              label="* 企业联系人姓名"
              onChange={(event) => updateForm('contactName', event.target.value)}
              placeholder="请填写企业联系人姓名"
              value={form.contactName}
            />
            <Input
              label="* 企业联系人身份证号"
              onChange={(event) => updateForm('contactIdCard', event.target.value)}
              placeholder="请填写企业联系人身份证号"
              value={form.contactIdCard}
            />
            <Input
              label="* 企业联系人手机号"
              onChange={(event) => updateForm('contactPhone', event.target.value)}
              placeholder="请填写企业联系人手机号"
              value={form.contactPhone}
            />
            <Input
              label="企业联系人邮箱"
              onChange={(event) => updateForm('contactEmail', event.target.value)}
              placeholder="请填写企业联系人邮箱"
              value={form.contactEmail}
            />

            <div className="enterprise-actions">
              <Button onClick={() => setStep('overview')} variant="secondary">
                取消
              </Button>
              <Button onClick={() => setStep('method')}>下一步</Button>
            </div>
          </div>
        ) : null}

        {step === 'method' ? (
          <div className="enterprise-method-panel">
            <button
              className={['enterprise-method-card', method === 'face' ? 'is-selected' : ''].filter(Boolean).join(' ')}
              onClick={() => setMethod('face')}
              type="button"
            >
              <UserCheck size={56} />
              <div>
                <strong>
                  企业法人人脸识别认证 <span>即时完成</span>
                </strong>
                <p>填写法人姓名与身份证号码</p>
                <p>企业法人亲自进行校验</p>
              </div>
            </button>

            <button
              className={['enterprise-method-card', method === 'recharge' ? 'is-selected' : '']
                .filter(Boolean)
                .join(' ')}
              onClick={() => setMethod('recharge')}
              type="button"
            >
              <Landmark size={56} />
              <div>
                <strong>
                  聆界平台充值认证 <span>1个工作日完成</span>
                </strong>
                <p>使用企业对公账户向聆界平台进行验证充值小于1元</p>
                <p>认证成功后，验证金将自动打入企业的聆界平台账户中，可随时使用</p>
                <p>若打款错误或失败，验证金将自动退回</p>
              </div>
            </button>

            <div className="enterprise-actions">
              <Button onClick={() => setStep('profile')} variant="secondary">
                返回修改企业信息
              </Button>
              <Button onClick={() => setStep(method === 'face' ? 'face' : 'recharge')}>下一步</Button>
            </div>
          </div>
        ) : null}

        {step === 'recharge' ? (
          <div className="enterprise-verify-panel">
            <p>
              <span>认证方式</span>
              <strong>聆界平台充值认证</strong>
            </p>
            <p className="enterprise-verify-copy">
              请使用 <em>企业银行对公账户</em> 向聆界平台账户打款 <em>（小于1元）</em>{' '}
              至迅联天下平台账户，认证成功后，验证金将自动打入企业的平台账户中。
            </p>

            <h2>付款方信息</h2>
            <p>
              <span>付款企业</span>
              <strong>{form.companyName || '待填写企业名称'}</strong>
            </p>
            <small>
              请使用与企业营业执照名称一致的对公账户进行转账，以便系统进行识别，若填报错误企业信息，转账将无效暨审核不通过
            </small>

            <div className="enterprise-info-alert">
              <AlertCircle size={20} />
              <span>
                为避免充值失败的情况，请在点击 <strong>确认并充值</strong>{' '}
                后，根据页面提示的金额进行转账，验证、充值金额有效期：<em>安全充值有效期为7个工作日</em>
                ，验证次数为2次。
              </span>
            </div>

            <div className="enterprise-actions enterprise-actions--center">
              <Button disabled={submitting} onClick={submitCertification}>
                {submitting ? '提交中...' : '确认并充值'}
              </Button>
              <Button onClick={() => setStep('method')} variant="secondary">
                返回选择认证方式
              </Button>
            </div>
          </div>
        ) : null}

        {step === 'face' ? (
          <div className="enterprise-face-panel">
            <p>
              <span>认证方式</span>
              <strong>企业法人人脸识别认证</strong>
            </p>
            <h2>企业法人基本信息</h2>
            <Input
              label="* 企业法人姓名"
              onChange={(event) => updateForm('legalPerson', event.target.value)}
              placeholder="请填写企业法人姓名"
              value={form.legalPerson}
            />
            <Input
              label="* 企业法人身份证号"
              onChange={(event) => updateForm('legalPersonIdCard', event.target.value)}
              placeholder="请填写企业法人身份证号"
              value={form.legalPersonIdCard}
            />

            <div className="enterprise-actions">
              <Button onClick={() => setStep('method')} variant="secondary">
                返回选择认证方式
              </Button>
              <Button onClick={() => setStep('faceScan')}>完成填写</Button>
            </div>
          </div>
        ) : null}

        {step === 'faceScan' ? (
          <div className="enterprise-face-panel">
            <p>
              <span>认证方式</span>
              <strong>企业法人人脸识别认证</strong>
            </p>
            <h2>企业法人基本信息</h2>
            <dl className="enterprise-legal-summary">
              <div>
                <dt>企业法人姓名</dt>
                <dd>{form.legalPerson || '-'}</dd>
              </div>
              <div>
                <dt>企业法人身份证号</dt>
                <dd>{form.legalPersonIdCard || '-'}</dd>
              </div>
            </dl>

            <div className="enterprise-qr-section">
              <h2>扫码认证</h2>
              <p>
                为了验证您的身份，请使用支付宝扫码进行人脸识别，剩余有效时间：<em>59分57秒</em>
              </p>
              <div className="enterprise-qr">二维码</div>
              <span>完成扫描操作后，资料将提交至运营端审核。</span>
              <div className="enterprise-actions enterprise-actions--center">
                <Button onClick={() => setStep('face')} variant="secondary">
                  重新填写法人信息
                </Button>
                <Button disabled={submitting} onClick={submitCertification}>
                  {submitting ? '提交中...' : '提交审核'}
                </Button>
              </div>
            </div>
          </div>
        ) : null}

        {step === 'pending' ? (
          <div className="enterprise-result enterprise-result--pending">
            <span>
              <ShieldCheck size={70} />
            </span>
            <h2>认证资料已提交，等待运营审核</h2>
            <p>
              当前状态：运营端审核中。审核通过后将自动解锁短信发送、签名报备等能力；未通过时可根据驳回原因重新提交。
            </p>
            <dl>
              <div>
                <dt>企业名称：</dt>
                <dd>{displayCompany}</dd>
              </div>
              <div>
                <dt>提交时间：</dt>
                <dd>{latestCertification?.submittedAt ?? '-'}</dd>
              </div>
              <div>
                <dt>审核时效：</dt>
                <dd>1 个工作日内</dd>
              </div>
              <div>
                <dt>当前节点：</dt>
                <dd>运营端资料审核</dd>
              </div>
            </dl>
            <div className="enterprise-actions enterprise-actions--center">
              <Button onClick={() => setStep('overview')} variant="secondary">
                返回概览
              </Button>
            </div>
          </div>
        ) : null}

        {step === 'success' ? (
          <div className="enterprise-result enterprise-result--success">
            <span>
              <Check size={70} />
            </span>
            <h2>认证审核通过</h2>
            <dl>
              <div>
                <dt>企业名称：</dt>
                <dd>{displayCompany}</dd>
              </div>
              <div>
                <dt>统一社会信用代码：</dt>
                <dd>{displayLicenseNo}</dd>
              </div>
              <div>
                <dt>法定代表人：</dt>
                <dd>{displayLegalPerson}</dd>
              </div>
              <div>
                <dt>认证时间：</dt>
                <dd>{latestCertification?.reviewedAt ?? latestCertification?.submittedAt ?? '-'}</dd>
              </div>
              <div>
                <dt>通讯地址：</dt>
                <dd>{displayAddress}</dd>
              </div>
            </dl>
            <Button onClick={() => setStep('overview')} variant="secondary">
              返回概览
            </Button>
          </div>
        ) : null}

        {step === 'failed' ? (
          <div className="enterprise-result enterprise-result--failed">
            <span>!</span>
            <h2>认证审核未通过</h2>
            <p>驳回原因：{latestCertification?.rejectReason ?? '请根据运营端审核意见修改资料后重新提交。'}</p>
            <button type="button" onClick={() => setStep('profile')}>
              重新提交资料 <ChevronRight size={18} />
            </button>
            <div className="enterprise-actions enterprise-actions--center">
              <Button onClick={() => setStep('profile')}>重新提交</Button>
              <Button onClick={() => setStep('overview')} variant="secondary">
                关闭页面
              </Button>
            </div>
          </div>
        ) : null}
      </div>
    </section>
  );
}