import { useEffect, useMemo, useState } from 'react';
import { ChevronDown, ChevronRight, Edit3, FileText, Info, Plus, Search, Trash2, Upload } from 'lucide-react';
import { adminApi, type ClientSmsApplication, type ClientSmsSignature, type FileRef, type TenantOption } from '@/api/adminApi';
import { Breadcrumb, Button, FileActions, Input, Modal, Pagination, Select, Tabs, Tag, Textarea } from '@/components/ui';

type CarrierStatus = 'approved' | 'pending' | 'rejected' | 'filing';

type DrainageInfo = {
  id: string;
  siteName: string;
  url: string;
  field1File?: UploadedFileRef | null;
  field2?: string;
  field3?: string;
  field4?: string;
  field5?: string;
  field6?: string;
  field7File?: UploadedFileRef | null;
  field8?: string;
  field9?: string;
  field10?: string;
  mobile: CarrierStatus;
  unicom: CarrierStatus;
  telecom: CarrierStatus;
  submittedAt: string;
  remark: string;
};

type UploadedFileRef = FileRef;

type SignatureProfile = {
  basis: string;
  companyName: string;
  creditCode: string;
  legalPersonName: string;
  legalPersonIdCard: string;
  responsibleName: string;
  responsiblePhone: string;
  responsibleIdCard: string;
  credentialFile?: UploadedFileRef | null;
  legalFrontFile?: UploadedFileRef | null;
  legalBackFile?: UploadedFileRef | null;
  responsibleFrontFile?: UploadedFileRef | null;
  responsibleBackFile?: UploadedFileRef | null;
};

type SignatureFormState = {
  tenantId: string;
  applicationId: string;
  name: string;
  purpose: string;
  profile: SignatureProfile;
  mobile: CarrierStatus;
  unicom: CarrierStatus;
  telecom: CarrierStatus;
};

const statusLabelMap: Record<CarrierStatus, string> = {
  approved: '已通过',
  pending: '审核中',
  rejected: '已驳回',
  filing: '待报备',
};

const statusToneMap: Record<CarrierStatus, 'success' | 'info' | 'danger' | 'neutral'> = {
  approved: 'success',
  pending: 'info',
  rejected: 'danger',
  filing: 'neutral',
};

const statusOptions = [
  { label: '已通过', value: 'approved' },
  { label: '审核中', value: 'pending' },
  { label: '已驳回', value: 'rejected' },
  { label: '待报备', value: 'filing' },
];

function StatusTag({ status }: { status: CarrierStatus }) {
  return <Tag tone={statusToneMap[status]}>{statusLabelMap[status]}</Tag>;
}

function readDrainagePayload(signature: ClientSmsSignature) {
  const payload = signature.drainageInfo && typeof signature.drainageInfo === 'object' ? signature.drainageInfo : {};
  const carrierStatus = typeof payload.carrierStatus === 'object' && payload.carrierStatus ? payload.carrierStatus as Record<string, unknown> : {};
  const profile = typeof payload.signatureProfile === 'object' && payload.signatureProfile ? payload.signatureProfile as Record<string, unknown> : {};
  const links = Array.isArray(payload.links) ? payload.links as Array<Record<string, unknown>> : [];
  const fallbackStatus = normalizeCarrierStatus(signature.auditStatus);
  return {
    carrierStatus: {
      mobile: normalizeCarrierStatus(carrierStatus.mobile, fallbackStatus),
      unicom: normalizeCarrierStatus(carrierStatus.unicom, fallbackStatus),
      telecom: normalizeCarrierStatus(carrierStatus.telecom, fallbackStatus),
    },
    signatureProfile: normalizeSignatureProfile(profile, signature),
    links: links.map((item) => ({
      id: String(item.id ?? `drain-${Date.now()}`),
      siteName: String(item.siteName ?? ''),
      url: String(item.url ?? ''),
      field1File: normalizeUploadedFile(item.field1File),
      field2: String(item.field2 ?? ''),
      field3: String(item.field3 ?? ''),
      field4: String(item.field4 ?? ''),
      field5: String(item.field5 ?? ''),
      field6: String(item.field6 ?? ''),
      field7File: normalizeUploadedFile(item.field7File),
      field8: String(item.field8 ?? ''),
      field9: String(item.field9 ?? ''),
      field10: String(item.field10 ?? ''),
      mobile: normalizeCarrierStatus(item.mobile, 'filing'),
      unicom: normalizeCarrierStatus(item.unicom, 'filing'),
      telecom: normalizeCarrierStatus(item.telecom, 'filing'),
      submittedAt: String(item.submittedAt ?? ''),
      remark: String(item.remark ?? ''),
    })),
  };
}

function buildDrainagePayload(carrierStatus: { mobile: CarrierStatus; unicom: CarrierStatus; telecom: CarrierStatus }, links: DrainageInfo[], signatureProfile?: SignatureProfile) {
  return { carrierStatus, links, signatureProfile };
}

function normalizeUploadedFile(value: unknown): UploadedFileRef | null {
  if (!value || typeof value !== 'object') return null;
  const item = value as Record<string, unknown>;
  const fileObjectId = String(item.fileObjectId ?? '');
  const fileName = String(item.fileName ?? '');
  const contentType = typeof item.contentType === 'string' ? item.contentType : undefined;
  return fileObjectId || fileName ? { contentType, fileObjectId, fileName } : null;
}

function emptySignatureProfile(signature?: ClientSmsSignature): SignatureProfile {
  return {
    basis: '',
    companyName: signature?.tenant?.name ?? '',
    creditCode: '',
    legalPersonName: '',
    legalPersonIdCard: '',
    responsibleName: '',
    responsiblePhone: '',
    responsibleIdCard: '',
    credentialFile: null,
    legalFrontFile: null,
    legalBackFile: null,
    responsibleFrontFile: null,
    responsibleBackFile: null,
  };
}

function normalizeSignatureProfile(value: Record<string, unknown>, signature?: ClientSmsSignature): SignatureProfile {
  return {
    ...emptySignatureProfile(signature),
    basis: String(value.basis ?? ''),
    companyName: String(value.companyName ?? signature?.tenant?.name ?? ''),
    creditCode: String(value.creditCode ?? ''),
    legalPersonName: String(value.legalPersonName ?? ''),
    legalPersonIdCard: String(value.legalPersonIdCard ?? ''),
    responsibleName: String(value.responsibleName ?? ''),
    responsiblePhone: String(value.responsiblePhone ?? ''),
    responsibleIdCard: String(value.responsibleIdCard ?? ''),
    credentialFile: normalizeUploadedFile(value.credentialFile),
    legalFrontFile: normalizeUploadedFile(value.legalFrontFile),
    legalBackFile: normalizeUploadedFile(value.legalBackFile),
    responsibleFrontFile: normalizeUploadedFile(value.responsibleFrontFile),
    responsibleBackFile: normalizeUploadedFile(value.responsibleBackFile),
  };
}

function normalizeCarrierStatus(value: unknown, fallback: CarrierStatus = 'filing'): CarrierStatus {
  return value === 'approved' || value === 'pending' || value === 'rejected' || value === 'filing' ? value : fallback;
}

function toAuditStatus(status: CarrierStatus) {
  return status === 'filing' ? 'pending' : status;
}

function formatDate(value?: string) {
  return value ? new Date(value).toLocaleString('zh-CN') : '-';
}

function SignatureUploadBox({
  compact = false,
  file,
  label,
  onUploaded,
}: {
  compact?: boolean;
  file?: UploadedFileRef | null;
  label: string;
  onUploaded: (file: UploadedFileRef) => void;
}) {
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState('');

  async function uploadFile(fileInput: File | undefined) {
    if (!fileInput) return;
    setUploading(true);
    setError('');
    try {
      const fileObject = await adminApi.uploadFileObject(fileInput, { purpose: 'signature_report_material', prefix: 'signature-report-materials' });
      onUploaded({ contentType: fileObject.contentType, fileObjectId: fileObject.id, fileName: fileObject.fileName });
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : '文件上传失败');
    } finally {
      setUploading(false);
    }
  }

  return (
    <label className={compact ? 'signature-upload signature-upload--compact' : 'signature-upload'}>
      <span>{label}</span>
      <Upload size={compact ? 30 : 42} />
      <strong>{uploading ? '上传中...' : file?.fileName || (compact ? '上传文件' : '点击上传 或拖拽文件到此处')}</strong>
      <FileActions file={file} />
      {!compact ? <small>支持 PNG、JPG、JPEG、PDF，文件大小不超过 10M</small> : null}
      {error ? <small className="form-error">{error}</small> : null}
      <input
        accept="image/png,image/jpeg,application/pdf"
        disabled={uploading}
        onChange={(event) => { void uploadFile(event.target.files?.[0]); }}
        style={{ display: 'none' }}
        type="file"
      />
    </label>
  );
}

function SignatureFormModal({
  applications,
  item,
  onClose,
  onSubmit,
  tenants,
}: {
  applications: ClientSmsApplication[];
  item?: ClientSmsSignature;
  onClose: () => void;
  onSubmit: (state: SignatureFormState) => void;
  tenants: TenantOption[];
}) {
  const payload = item ? readDrainagePayload(item) : null;
  const [form, setForm] = useState<SignatureFormState>({
    tenantId: item?.tenantId ?? '',
    applicationId: item?.applicationId ?? '',
    name: item?.name ?? '',
    purpose: item?.purpose ?? '',
    profile: payload?.signatureProfile ?? emptySignatureProfile(item),
    mobile: payload?.carrierStatus.mobile ?? 'filing',
    unicom: payload?.carrierStatus.unicom ?? 'filing',
    telecom: payload?.carrierStatus.telecom ?? 'filing',
  });
  const tenantApplications = applications.filter((application) => application.tenantId === form.tenantId && application.status !== 'deleted');

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

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

  return (
    <Modal
      footer={(
        <>
          <Button onClick={onClose} variant="ghost">取消</Button>
          <Button disabled={!form.tenantId || !form.name} onClick={() => onSubmit(form)}>保存</Button>
        </>
      )}
      onClose={onClose}
      open
      size="xl"
      title={(
        <div className="signature-modal-title">
          <h2>{item ? '编辑签名' : '添加签名'}</h2>
          <p>{item ? '修改短信签名的相关信息' : '新增短信签名的相关信息'}</p>
        </div>
      )}
    >
      <div className="signature-form">
        <section>
          <h3>基本信息</h3>
          <div className="signature-alert">
            <Info size={18} />
            <span>签名需履行报备，并遵照管理部门审核结果方可使用。请用 PNG、JPG、JPEG 或 PDF 格式上传真实材料。</span>
          </div>
          <div className="signature-form-grid">
            <Select
              disabled={Boolean(item)}
              label="所属企业"
              onChange={(event) => update('tenantId', event.target.value)}
              options={[
                { label: '请选择企业', value: '' },
                ...tenants.map((tenant) => ({ label: `${tenant.name}（${tenant.code}）`, value: tenant.id })),
              ]}
              required
              value={form.tenantId}
            />
            <Select
              label="* 应用名称"
              onChange={(event) => update('applicationId', event.target.value)}
              options={[
                { label: '不绑定应用', value: '' },
                ...tenantApplications.map((application) => ({ label: application.name, value: application.id })),
              ]}
              value={form.applicationId}
            />
            <Select
              label="* 签名依据"
              onChange={(event) => updateProfile('basis', event.target.value)}
              options={[
                { label: '请选择签名依据', value: '' },
                { label: '企事业单位证明', value: 'company' },
                { label: '商标注册证', value: 'trademark' },
                { label: '授权委托书', value: 'authorization' },
              ]}
              value={form.profile.basis}
            />
            <Input label="* 短信签名" onChange={(event) => update('name', event.target.value)} placeholder="请输入短信签名，如【XXXX公司】" required value={form.name} />
          </div>
          <SignatureUploadBox
            file={form.profile.credentialFile}
            label="* 资质凭证"
            onUploaded={(file) => updateProfile('credentialFile', file)}
          />
        </section>

        <section>
          <h3>公司信息</h3>
          <div className="signature-form-grid">
            <Input label="* 公司名称" onChange={(event) => updateProfile('companyName', event.target.value)} placeholder="请输入公司名称" value={form.profile.companyName} />
            <Input label="* 统一社会信用代码" onChange={(event) => updateProfile('creditCode', event.target.value)} placeholder="请输入统一社会信用代码" value={form.profile.creditCode} />
            <Input label="* 法人姓名" onChange={(event) => updateProfile('legalPersonName', event.target.value)} placeholder="请输入法人姓名" value={form.profile.legalPersonName} />
            <Input label="法人身份证号" onChange={(event) => updateProfile('legalPersonIdCard', event.target.value)} placeholder="请输入法人身份证号" value={form.profile.legalPersonIdCard} />
            <SignatureUploadBox compact file={form.profile.legalFrontFile} label="法人身份证照片-人像面" onUploaded={(file) => updateProfile('legalFrontFile', file)} />
            <SignatureUploadBox compact file={form.profile.legalBackFile} label="法人身份证照片-国徽面" onUploaded={(file) => updateProfile('legalBackFile', file)} />
          </div>
        </section>

        <section>
          <h3>责任人信息</h3>
          <div className="signature-form-grid">
            <Input label="* 责任人姓名" onChange={(event) => updateProfile('responsibleName', event.target.value)} placeholder="请输入责任人姓名" value={form.profile.responsibleName} />
            <Input label="* 责任人手机号" onChange={(event) => updateProfile('responsiblePhone', event.target.value)} placeholder="请输入责任人手机号" value={form.profile.responsiblePhone} />
            <Input className="signature-form-grid__wide" label="* 责任人身份证号" onChange={(event) => updateProfile('responsibleIdCard', event.target.value)} placeholder="请输入责任人身份证号" value={form.profile.responsibleIdCard} />
            <SignatureUploadBox compact file={form.profile.responsibleFrontFile} label="责任人身份证照片-人像面" onUploaded={(file) => updateProfile('responsibleFrontFile', file)} />
            <SignatureUploadBox compact file={form.profile.responsibleBackFile} label="责任人身份证照片-国徽面" onUploaded={(file) => updateProfile('responsibleBackFile', file)} />
          </div>
        </section>

        <section>
          <h3>三网报备状态</h3>
          <div className="signature-form-grid">
            <Select label="移动状态" onChange={(event) => update('mobile', event.target.value as CarrierStatus)} options={statusOptions} value={form.mobile} />
            <Select label="联通状态" onChange={(event) => update('unicom', event.target.value as CarrierStatus)} options={statusOptions} value={form.unicom} />
            <Select label="电信状态" onChange={(event) => update('telecom', event.target.value as CarrierStatus)} options={statusOptions} value={form.telecom} />
          </div>
        </section>
      </div>
    </Modal>
  );
}

function DrainageFormModal({ item, onClose, onSubmit }: { item?: DrainageInfo; onClose: () => void; onSubmit: (item: DrainageInfo) => void }) {
  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: new Date().toLocaleString('zh-CN'),
    remark: '',
  });

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

  return (
    <Modal
      footer={(
        <>
          <Button onClick={onClose} variant="ghost">取消</Button>
          <Button disabled={!form.url} onClick={() => onSubmit(form)}>保存</Button>
        </>
      )}
      onClose={onClose}
      open
      size="xl"
      title={item ? '编辑引流信息' : '添加引流信息'}
    >
      <div className="signature-form drainage-edit-form">
        <section>
          <h3>基本信息</h3>
          <Input
            label="* 引流信息"
            onChange={(event) => update('url', event.target.value)}
            placeholder="请输入引流网址"
            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">
            <SignatureUploadBox compact file={form.field1File} label="* 字段名称1" onUploaded={(file) => update('field1File', file)} />
            <Input label="* 字段名称2" onChange={(event) => update('field2', event.target.value)} placeholder="请输入字段2内容" value={form.field2 ?? ''} />
            <Input label="* 字段名称3" onChange={(event) => { update('field3', event.target.value); update('siteName', event.target.value); }} placeholder="请输入公司名称" value={form.field3 ?? form.siteName} />
            <Input label="字段名称4" onChange={(event) => update('field4', event.target.value)} placeholder="请输入统一社会信用代码" value={form.field4 ?? ''} />
            <Input label="* 字段名称5" onChange={(event) => update('field5', event.target.value)} placeholder="请输入法人姓名" value={form.field5 ?? ''} />
            <Input label="字段名称6" onChange={(event) => update('field6', event.target.value)} placeholder="请输入法人身份证号" value={form.field6 ?? ''} />
            <SignatureUploadBox compact file={form.field7File} label="字段名称7" onUploaded={(file) => update('field7File', file)} />
            <Input label="* 字段名称8" onChange={(event) => update('field8', event.target.value)} placeholder="请输入责任人身份证号" value={form.field8 ?? ''} />
            <Input label="* 字段名称9" onChange={(event) => update('field9', event.target.value)} placeholder="请输入责任人姓名" value={form.field9 ?? ''} />
            <Input label="* 字段名称10" onChange={(event) => update('field10', event.target.value)} placeholder="请输入责任人手机号" value={form.field10 ?? ''} />
            <Select label="移动状态" onChange={(event) => update('mobile', event.target.value as CarrierStatus)} options={statusOptions} value={form.mobile} />
            <Select label="联通状态" onChange={(event) => update('unicom', event.target.value as CarrierStatus)} options={statusOptions} value={form.unicom} />
            <Select label="电信状态" onChange={(event) => update('telecom', event.target.value as CarrierStatus)} options={statusOptions} value={form.telecom} />
            <Input label="提交时间" onChange={(event) => update('submittedAt', event.target.value)} value={form.submittedAt} />
            <Textarea className="signature-form-grid__wide" label="备注" onChange={(event) => update('remark', event.target.value)} rows={4} value={form.remark} />
          </div>
        </section>
      </div>
    </Modal>
  );
}

function SignatureReportModal({ item, onClose }: { item: ClientSmsSignature; onClose: () => void }) {
  const payload = readDrainagePayload(item);
  return (
    <Modal footer={<Button onClick={onClose}>关闭</Button>} onClose={onClose} open title="签名报备详情">
      <div className="admin-report-detail">
        <div className="detail-grid">
          <div><span>企业名称</span><strong>{item.tenant?.name ?? item.tenantId}</strong></div>
          <div><span>应用名称</span><strong>{item.application?.name ?? '-'}</strong></div>
          <div><span>签名名称</span><strong>{item.name}</strong></div>
          <div><span>更新时间</span><strong>{formatDate(item.updatedAt)}</strong></div>
        </div>
        <div className="admin-report-tabs">
          <button className="admin-report-carrier--mobile active" type="button"><strong>移动</strong><span><StatusTag status={payload.carrierStatus.mobile} /></span></button>
          <button className="admin-report-carrier--unicom active" type="button"><strong>联通</strong><span><StatusTag status={payload.carrierStatus.unicom} /></span></button>
          <button className="admin-report-carrier--telecom active" type="button"><strong>电信</strong><span><StatusTag status={payload.carrierStatus.telecom} /></span></button>
        </div>
      </div>
    </Modal>
  );
}

function DrainageReportModal({ item, onClose }: { item: DrainageInfo; onClose: () => void }) {
  return (
    <Modal footer={<Button onClick={onClose}>关闭</Button>} onClose={onClose} open title="引流信息报备详情">
      <div className="detail-grid">
        <div><span>站名称</span><strong>{item.siteName}</strong></div>
        <div><span>网站链接</span><strong>{item.url}</strong></div>
        <div><span>移动</span><StatusTag status={item.mobile} /></div>
        <div><span>联通</span><StatusTag status={item.unicom} /></div>
        <div><span>电信</span><StatusTag status={item.telecom} /></div>
        <div><span>提交时间</span><strong>{item.submittedAt}</strong></div>
        <div className="detail-grid__wide"><span>备注</span><strong>{item.remark || '-'}</strong></div>
      </div>
    </Modal>
  );
}

function ConfirmModal({ message, onCancel, onConfirm }: { message: string; onCancel: () => void; onConfirm: () => void }) {
  return (
    <Modal
      footer={(
        <>
          <Button onClick={onCancel} variant="ghost">取消</Button>
          <Button onClick={onConfirm} variant="danger">确认删除</Button>
        </>
      )}
      onClose={onCancel}
      open
      title="删除确认"
    >
      <p className="admin-confirm-text">{message}</p>
    </Modal>
  );
}

export function AdminEnterpriseSignaturesPage() {
  const [activeTab, setActiveTab] = useState<'sms' | 'mms'>('sms');
  const [applications, setApplications] = useState<ClientSmsApplication[]>([]);
  const [deleteTarget, setDeleteTarget] = useState<{ kind: 'signature'; id: string; name: string } | { kind: 'drainage'; signatureId: string; id: string; name: string } | null>(null);
  const [drainageModal, setDrainageModal] = useState<{ signatureId: string; item?: DrainageInfo } | null>(null);
  const [drainageReport, setDrainageReport] = useState<DrainageInfo | null>(null);
  const [enterpriseKeyword, setEnterpriseKeyword] = useState('');
  const [error, setError] = useState('');
  const [expandedSignatureId, setExpandedSignatureId] = useState('');
  const [signatureKeyword, setSignatureKeyword] = useState('');
  const [signatureModal, setSignatureModal] = useState<ClientSmsSignature | 'new' | null>(null);
  const [signatureReport, setSignatureReport] = useState<ClientSmsSignature | null>(null);
  const [signatures, setSignatures] = useState<ClientSmsSignature[]>([]);
  const [tenants, setTenants] = useState<TenantOption[]>([]);
  const [page, setPage] = useState(1);

  async function loadData() {
    try {
      const [signatureItems, tenantItems, applicationItems] = await Promise.all([
        adminApi.listEnterpriseSignatures({ keyword: [enterpriseKeyword, signatureKeyword].filter(Boolean).join(' ') }),
        adminApi.listTenants(),
        adminApi.listEnterpriseApplications(),
      ]);
      setSignatures(signatureItems);
      setTenants(tenantItems.filter((tenant) => tenant.status !== 'deleted'));
      setApplications(applicationItems);
      setError('');
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : '企业签名加载失败');
    }
  }

  useEffect(() => {
    void loadData();
  }, []);

  const filteredSignatures = useMemo(() => signatures.filter((item) => {
    const enterprise = item.tenant?.name ?? item.tenantId;
    const application = item.application?.name ?? '';
    return (!enterpriseKeyword || enterprise.includes(enterpriseKeyword))
      && (!signatureKeyword || item.name.includes(signatureKeyword) || application.includes(signatureKeyword) || (item.purpose ?? '').includes(signatureKeyword));
  }), [enterpriseKeyword, signatureKeyword, signatures]);
  const pageSize = 10;
  const totalPages = Math.max(1, Math.ceil(filteredSignatures.length / pageSize));
  const currentPage = Math.min(page, totalPages);
  const visibleSignatures = filteredSignatures.slice((currentPage - 1) * pageSize, currentPage * pageSize);

  useEffect(() => {
    setPage(1);
  }, [enterpriseKeyword, filteredSignatures.length, signatureKeyword]);

  async function saveSignature(state: SignatureFormState) {
    const existing = signatureModal && signatureModal !== 'new' ? signatureModal : null;
    const existingPayload = existing ? readDrainagePayload(existing) : { links: [] };
    const drainageInfo = buildDrainagePayload({
      mobile: state.mobile,
      unicom: state.unicom,
      telecom: state.telecom,
    }, existingPayload.links, state.profile);
    try {
      if (existing) {
        await adminApi.updateEnterpriseSignature(existing.id, {
          applicationId: state.applicationId || null,
          auditStatus: toAuditStatus(state.mobile),
          drainageInfo,
          name: state.name,
          purpose: state.purpose,
        });
      } else {
        await adminApi.createEnterpriseSignature({
          applicationId: state.applicationId || undefined,
          drainageInfo,
          name: state.name,
          purpose: state.purpose,
          tenantId: state.tenantId,
        });
      }
      setSignatureModal(null);
      await loadData();
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : '企业签名保存失败');
    }
  }

  async function saveDrainage(signatureId: string, item: DrainageInfo) {
    const signature = signatures.find((current) => current.id === signatureId);
    if (!signature) {
      return;
    }
    const payload = readDrainagePayload(signature);
    const links = payload.links.some((current) => current.id === item.id)
      ? payload.links.map((current) => current.id === item.id ? item : current)
      : [item, ...payload.links];
    await adminApi.updateEnterpriseSignature(signatureId, {
      drainageInfo: buildDrainagePayload(payload.carrierStatus, links, payload.signatureProfile),
    });
    setDrainageModal(null);
    setExpandedSignatureId(signatureId);
    await loadData();
  }

  async function confirmDelete() {
    if (!deleteTarget) {
      return;
    }
    if (deleteTarget.kind === 'signature') {
      await adminApi.changeEnterpriseSignatureStatus(deleteTarget.id, 'deleted', '运营端删除签名');
    } else {
      const signature = signatures.find((item) => item.id === deleteTarget.signatureId);
      if (signature) {
        const payload = readDrainagePayload(signature);
        await adminApi.updateEnterpriseSignature(signature.id, {
          drainageInfo: buildDrainagePayload(payload.carrierStatus, payload.links.filter((item) => item.id !== deleteTarget.id), payload.signatureProfile),
        });
      }
    }
    setDeleteTarget(null);
    await loadData();
  }

  const smsSignatureContent = (
    <div className="signature-list admin-enterprise-signature-list">
      {visibleSignatures.map((signature) => {
        const payload = readDrainagePayload(signature);
        const expanded = expandedSignatureId === signature.id;
        return (
          <article className="signature-card signature-card--green" key={signature.id}>
            <div className="signature-summary">
              <button aria-label="展开签名" onClick={() => setExpandedSignatureId(expanded ? '' : signature.id)} type="button">
                {expanded ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
              </button>
              <div><span>签名名称</span><strong>{signature.name}</strong></div>
              <div><span>企业</span><strong>{signature.tenant?.name ?? signature.tenantId}</strong></div>
              <div><span>应用</span><strong>{signature.application?.name ?? '-'}</strong></div>
              <div><span>移动</span><StatusTag status={payload.carrierStatus.mobile} /></div>
              <div><span>联通</span><StatusTag status={payload.carrierStatus.unicom} /></div>
              <div><span>电信</span><StatusTag status={payload.carrierStatus.telecom} /></div>
              <div><span>引流信息</span><strong>{payload.links.length} 条</strong></div>
              <div className="signature-actions">
                <Button icon={<FileText size={16} />} onClick={() => setSignatureReport(signature)} size="sm" variant="ghost">报备详情</Button>
                <Button icon={<Edit3 size={16} />} onClick={() => setSignatureModal(signature)} size="sm" variant="ghost">编辑</Button>
                <Button icon={<Trash2 size={16} />} onClick={() => setDeleteTarget({ kind: 'signature', id: signature.id, name: signature.name })} size="sm" variant="danger">删除</Button>
              </div>
            </div>
            {expanded ? (
              <div className="drainage-panel">
                <h2>引流信息列表</h2>
                {payload.links.length ? (
                  <div className="drainage-table">
                    <div className="drainage-table__head">
                      <span>站名称</span>
                      <span>网站链接</span>
                      <span>移动</span>
                      <span>联通</span>
                      <span>电信</span>
                      <span>提交时间</span>
                      <span>操作</span>
                    </div>
                    {payload.links.map((item) => (
                      <div className="drainage-table__row" key={item.id}>
                        <strong>{item.siteName}</strong>
                        <a href={item.url} rel="noreferrer" target="_blank">{item.url}</a>
                        <StatusTag status={item.mobile} />
                        <StatusTag status={item.unicom} />
                        <StatusTag status={item.telecom} />
                        <span className="muted">{item.submittedAt}</span>
                        <span className="drainage-row-actions">
                          <Button onClick={() => setDrainageReport(item)} size="sm" variant="ghost">报备详情</Button>
                          <Button onClick={() => setDrainageModal({ signatureId: signature.id, item })} size="sm" variant="ghost">编辑</Button>
                          <Button onClick={() => setDeleteTarget({ kind: 'drainage', signatureId: signature.id, id: item.id, name: item.siteName })} size="sm" variant="danger">删除</Button>
                        </span>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="muted">暂无引流信息</p>
                )}
                <div className="drainage-panel__footer">
                  <Button icon={<Plus size={16} />} onClick={() => setDrainageModal({ signatureId: signature.id })} size="sm" variant="ghost">添加引流信息</Button>
                </div>
              </div>
            ) : null}
          </article>
        );
      })}
      <Pagination
        nextDisabled={currentPage >= totalPages}
        onNext={() => setPage((value) => Math.min(totalPages, value + 1))}
        onPrevious={() => setPage((value) => Math.max(1, value - 1))}
        page={currentPage}
        previousDisabled={currentPage <= 1}
        total={filteredSignatures.length}
      />
      {filteredSignatures.length === 0 ? <div className="ui-table__empty">暂无企业签名</div> : null}
    </div>
  );

  return (
    <section className="page-stack admin-customer-split-page">
      <div className="page-heading">
        <div>
          <Breadcrumb items={['客户管理', '企业签名管理']} />
          <h1>企业签名管理</h1>
        </div>
        <Button icon={<Plus size={16} />} onClick={() => setSignatureModal(activeTab === 'sms' ? 'new' : null)}>添加签名</Button>
      </div>

      <div className="surface admin-split-filter">
        <Input label="企业名称" onChange={(event) => setEnterpriseKeyword(event.target.value)} placeholder="请输入企业名称" prefix={<Search size={16} />} value={enterpriseKeyword} />
        <Input label="签名/应用" onChange={(event) => setSignatureKeyword(event.target.value)} placeholder="请输入签名或应用名称" prefix={<Search size={16} />} value={signatureKeyword} />
        <Button onClick={() => { setEnterpriseKeyword(''); setSignatureKeyword(''); void loadData(); }} variant="ghost">重置</Button>
        <Button icon={<Search size={16} />} onClick={() => { void loadData(); }}>查询</Button>
      </div>

      {error ? <p className="form-error">{error}</p> : null}

      <div className="surface section-stack">
        <Tabs
          onChange={(value) => setActiveTab(value as 'sms' | 'mms')}
          value={activeTab}
          items={[
            { label: '短信签名', value: 'sms', content: smsSignatureContent },
            { label: '彩信签名', pending: true, value: 'mms', content: <div className="ui-table__empty">彩信签名待后端能力确认，本页不展示演示数据。</div> },
          ]}
        />
      </div>

      {signatureModal ? (
        <SignatureFormModal
          applications={applications}
          item={signatureModal === 'new' ? undefined : signatureModal}
          onClose={() => setSignatureModal(null)}
          onSubmit={(state) => { void saveSignature(state); }}
          tenants={tenants}
        />
      ) : null}
      {signatureReport ? <SignatureReportModal item={signatureReport} onClose={() => setSignatureReport(null)} /> : null}
      {drainageModal ? (
        <DrainageFormModal
          item={drainageModal.item}
          onClose={() => setDrainageModal(null)}
          onSubmit={(item) => { void saveDrainage(drainageModal.signatureId, item); }}
        />
      ) : null}
      {drainageReport ? <DrainageReportModal item={drainageReport} onClose={() => setDrainageReport(null)} /> : null}
      {deleteTarget ? (
        <ConfirmModal
          message={`确认删除“${deleteTarget.name}”吗？删除后会写入真实后台。`}
          onCancel={() => setDeleteTarget(null)}
          onConfirm={() => { void confirmDelete(); }}
        />
      ) : null}
    </section>
  );
}