import { useEffect, useMemo, useState } from 'react';
import { ArrowLeft, Eye, FileSliders, Search } from 'lucide-react';
import { useNavigate, useParams } from 'react-router-dom';
import { adminApi, type AdminChannel, type ChannelReportField, type ClientSmsSignature, type DictionaryItem, type ReportRecord, type ReportTask } from '@/api/adminApi';
import { Breadcrumb, Button, Input, Modal, Select, Tag, Textarea } from '@/components/ui';
import { formatDateTime } from '@/utils/dateTime';

type ReportType = 'signature' | 'drainage' | 'both';
type DrainageItem = Record<string, unknown> & { id?: string; url?: string; siteName?: string; submittedAt?: string; remark?: string };

const statusMeta: Record<string, { label: string; tone: 'success' | 'danger' | 'warning' | 'neutral' }> = {
  approved: { label: '报备成功', tone: 'success' },
  success: { label: '报备成功', tone: 'success' },
  failed: { label: '报备失败', tone: 'danger' },
  rejected: { label: '报备失败', tone: 'danger' },
  pending: { label: '未报备', tone: 'neutral' },
  waiting_material: { label: '资料待补充', tone: 'warning' },
  exporting: { label: '报备中', tone: 'warning' },
  reporting: { label: '报备中', tone: 'warning' },
  abandoned: { label: '已放弃', tone: 'neutral' },
  partial_success: { label: '部分成功', tone: 'warning' },
  filing: { label: '报备中', tone: 'warning' },
};

const fieldTypeLabel: Record<string, string> = { string: '字符串', image: '图片', file: '文件' };

function asRecord(value: unknown): Record<string, unknown> {
  return value && typeof value === 'object' && !Array.isArray(value) ? value as Record<string, unknown> : {};
}

function formatSignatureName(value?: string | null) {
  const name = String(value ?? '-').trim().replace(/^[【\[]+|[】\]]+$/g, '');
  return `【${name || '-'}】`;
}

function drainageItems(signature?: ClientSmsSignature) {
  const payload = asRecord(signature?.drainageInfo);
  return Array.isArray(payload.links) ? payload.links.filter((item): item is DrainageItem => Boolean(item) && typeof item === 'object') : [];
}

function DateTime({ value }: { value?: unknown }) {
  return value ? <span className="channel-report-date">{formatDateTime(String(value))}</span> : <span className="muted">-</span>;
}

function ReportStatus({ value }: { value?: string }) {
  const meta = statusMeta[value ?? ''] ?? { label: value || '未报备', tone: 'neutral' as const };
  return <Tag tone={meta.tone}>{meta.label}</Tag>;
}

function DetailModal({ drainage, signature, task, onClose }: { drainage?: DrainageItem; signature?: ClientSmsSignature; task: ReportTask; onClose: () => void }) {
  const payload = asRecord(signature?.drainageInfo);
  const profile = asRecord(payload.signatureProfile);
  const reportValues = asRecord(drainage ? drainage.reportValues : payload.signatureReportValues);
  return (
    <Modal footer={<Button onClick={onClose}>关闭</Button>} onClose={onClose} open size="xl" title={drainage ? '查看引流信息详情' : '查看签名详情'}>
      <div className="channel-report-detail">
        <strong>{drainage ? String(drainage.siteName || drainage.url || '引流信息') : formatSignatureName(signature?.name ?? task.signature?.name)}</strong>
        <p><span>企业</span><span>{signature?.tenant?.name ?? task.tenantId}</span></p>
        <p><span>企业应用</span><span>{signature?.application?.name ?? '-'}</span></p>
        {!drainage ? <><p><span>签名依据</span><span>{String(profile.basis ?? '-')}</span></p><p><span>公司名称</span><span>{String(profile.companyName ?? '-')}</span></p><p><span>统一社会信用代码</span><span>{String(profile.creditCode ?? '-')}</span></p></> : null}
        {drainage ? <><p><span>引流地址</span><span>{String(drainage.url ?? '-')}</span></p><p><span>备注</span><span>{String(drainage.remark ?? '-')}</span></p></> : null}
        {Object.entries(reportValues).map(([key, value]) => <p key={key}><span>{key}</span><span>{typeof value === 'object' ? String(asRecord(value).fileName ?? asRecord(value).fileObjectId ?? '-') : String(value ?? '-')}</span></p>)}
      </div>
    </Modal>
  );
}

export function AdminChannelReportPage() {
  const navigate = useNavigate();
  const { channelId = '' } = useParams();
  const [channel, setChannel] = useState<AdminChannel>();
  const [tasks, setTasks] = useState<ReportTask[]>([]);
  const [records, setRecords] = useState<ReportRecord[]>([]);
  const [signatures, setSignatures] = useState<ClientSmsSignature[]>([]);
  const [fields, setFields] = useState<ChannelReportField[]>([]);
  const [libraryFields, setLibraryFields] = useState<DictionaryItem[]>([]);
  const [keyword, setKeyword] = useState('');
  const [status, setStatus] = useState('all');
  const [detail, setDetail] = useState<{ task: ReportTask; signature?: ClientSmsSignature; drainage?: DrainageItem }>();
  const [statusTask, setStatusTask] = useState<ReportTask>();
  const [nextStatus, setNextStatus] = useState('approved');
  const [statusReason, setStatusReason] = useState('');
  const [configType, setConfigType] = useState<ReportType>();
  const [drainageFieldId, setDrainageFieldId] = useState('');
  const [required, setRequired] = useState(false);
  const [description, setDescription] = useState('');
  const [error, setError] = useState('');

  function loadData() {
    Promise.all([
      adminApi.listChannels(),
      adminApi.listReportTasks({ channelId }),
      adminApi.listReportRecords({ channelId }),
      adminApi.listEnterpriseSignatures(),
      adminApi.listChannelReportFields(channelId),
      adminApi.listDrainageFields(),
    ]).then(([channelItems, taskItems, recordItems, signatureItems, fieldItems, libraryItems]) => {
      setChannel(channelItems.find((item) => item.id === channelId));
      setTasks(taskItems);
      setRecords(recordItems);
      setSignatures(signatureItems);
      setFields(fieldItems);
      setLibraryFields(libraryItems.filter((item) => item.status === 'active'));
      setError('');
    }).catch((failure: Error) => setError(failure.message || '通道报备详情加载失败'));
  }

  useEffect(loadData, [channelId]);

  const signatureMap = useMemo(() => new Map(signatures.map((item) => [item.id, item])), [signatures]);
  const visibleTasks = useMemo(() => tasks.filter((task) => {
    const signature = signatureMap.get(task.signatureId);
    const drainage = drainageItems(signature).find((item) => String(item.id) === task.drainageItemId);
    const matchesKeyword = !keyword.trim() || [signature?.name, signature?.tenant?.name, signature?.application?.name, drainage?.siteName, drainage?.url].some((value) => String(value ?? '').includes(keyword.trim()));
    return matchesKeyword && (status === 'all' || task.status === status);
  }), [keyword, signatureMap, status, tasks]);

  function lastRecord(taskId: string, action: string) {
    return records.find((record) => record.taskId === taskId && record.action === action);
  }

  function createField() {
    if (!configType || !drainageFieldId) return;
    adminApi.createChannelReportField({ channelId, drainageFieldId, reportType: configType, required, description, status: 'active' })
      .then(() => { setConfigType(undefined); setDrainageFieldId(''); setRequired(false); setDescription(''); loadData(); })
      .catch((failure: Error) => setError(failure.message || '报备字段保存失败'));
  }

  function saveTaskStatus() {
    if (!statusTask) return;
    adminApi.changeReportTaskStatuses({ items: [{ signatureId: statusTask.signatureId, channelId: statusTask.channelId, reportType: statusTask.reportType, drainageItemId: statusTask.drainageItemId ?? undefined, status: nextStatus }], reason: statusReason })
      .then(() => { setStatusTask(undefined); setStatusReason(''); loadData(); })
      .catch((failure: Error) => setError(failure.message || '报备状态保存失败'));
  }

  return (
    <section className="page-stack channel-report-page">
      <div className="surface channel-report-hero">
        <Breadcrumb items={['通道管理', '短信通道', '报备详情']} />
        <div className="channel-report-heading">
          <Button icon={<ArrowLeft size={16} />} onClick={() => navigate('/admin/channels')} variant="ghost">返回</Button>
          <h1>{channel?.name ?? '通道报备详情'}</h1>
          <div className="channel-report-config-actions">
            <Button icon={<FileSliders size={16} />} onClick={() => setConfigType('signature')} variant="ghost">配置签名报备字段</Button>
            <Button icon={<FileSliders size={16} />} onClick={() => setConfigType('drainage')} variant="ghost">配置引流信息字段</Button>
          </div>
        </div>
        <div className="muted">通道编号：{channel?.code ?? channelId} · 已配置字段 {fields.length} 个</div>
      </div>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="surface channel-report-filter">
        <div className="channel-report-filter-grid">
          <Input label="签名/企业/应用" onChange={(event) => setKeyword(event.target.value)} placeholder="请输入关键词" prefix={<Search size={16} />} value={keyword} />
          <Select label="报备状态" onChange={(event) => setStatus(event.target.value)} options={[{ label: '全部状态', value: 'all' }, ...Object.entries(statusMeta).filter(([value]) => ['approved', 'failed', 'pending', 'waiting_material', 'exporting', 'partial_success'].includes(value)).map(([value, meta]) => ({ label: meta.label, value }))]} value={status} />
          <div><strong>真实数据口径</strong><p className="muted">签名和引流信息分别展示在该通道上的真实报备任务。</p></div>
        </div>
        <div className="channel-report-filter-footer"><span>共 {visibleTasks.length} 条报备任务</span><div><Button onClick={() => { setKeyword(''); setStatus('all'); }} variant="ghost">重置</Button><Button icon={<Search size={16} />} onClick={loadData}>查询</Button></div></div>
      </div>

      <div className="surface channel-report-table">
        <div className="channel-report-table__head"><span /><span>短信签名 / 引流信息</span><span>报备状态</span><span>提交时间</span><span>报备时间</span><span>最后更新</span><span>发送统计</span><span>操作</span></div>
        {visibleTasks.length === 0 ? <div className="channel-report-empty">当前通道暂无真实报备任务</div> : visibleTasks.map((task) => {
          const signature = signatureMap.get(task.signatureId);
          const drainage = task.reportType === 'drainage' ? drainageItems(signature).find((item) => String(item.id) === task.drainageItemId) : undefined;
          const exported = lastRecord(task.id, 'export');
          const imported = lastRecord(task.id, 'receipt_import');
          return <div className={`channel-report-row ${drainage ? 'channel-report-row--drainage' : 'channel-report-row--signature'}`} key={task.id}>
              <span />
              <div className={`channel-report-name ${drainage ? 'channel-report-name--flow' : ''}`}>{drainage ? <i /> : null}<span><strong>{drainage ? String(drainage.siteName || drainage.url || '引流信息') : formatSignatureName(signature?.name ?? task.signature?.name)}</strong><small>{drainage ? `${String(drainage.url ?? '')} · ${formatSignatureName(signature?.name ?? task.signature?.name)}` : signature?.tenant?.name ?? task.tenantId}</small></span></div>
              <ReportStatus value={task.status} />
              <DateTime value={drainage?.submittedAt ?? task.createdAt} />
              <DateTime value={imported?.createdAt ?? exported?.createdAt} />
              <DateTime value={task.updatedAt} />
              <div className="channel-report-stats"><span>成功<strong className="is-success">-</strong><b>暂无统计</b></span><span>未知<strong className="is-warning">-</strong><b>暂无统计</b></span><span>失败<strong className="is-danger">-</strong><b>暂无统计</b></span></div>
              <div className="channel-report-actions"><button onClick={() => setDetail({ task, signature, drainage })} type="button"><Eye size={16} />查看详情</button><button className="is-warning" onClick={() => { setStatusTask(task); setNextStatus(task.status); }} type="button">修改状态</button></div>
          </div>;
        })}
      </div>

      {detail ? <DetailModal {...detail} onClose={() => setDetail(undefined)} /> : null}
      <Modal footer={<><Button onClick={() => setStatusTask(undefined)} variant="ghost">取消</Button><Button onClick={saveTaskStatus}>保存</Button></>} onClose={() => setStatusTask(undefined)} open={Boolean(statusTask)} title="修改当前通道报备状态"><div className="admin-system-modal-form"><Select label="报备状态" onChange={(event) => setNextStatus(event.target.value)} options={[{label:'未报备',value:'pending'},{label:'资料待补充',value:'waiting_material'},{label:'报备中',value:'reporting'},{label:'报备通过',value:'approved'},{label:'报备失败',value:'failed'},{label:'放弃报备',value:'abandoned'}]} value={nextStatus}/><Textarea label="修改原因" onChange={(event) => setStatusReason(event.target.value)} rows={3} value={statusReason}/></div></Modal>
      <Modal footer={<><Button onClick={() => setConfigType(undefined)} variant="ghost">取消</Button><Button disabled={!drainageFieldId} onClick={createField}>保存</Button></>} onClose={() => setConfigType(undefined)} open={Boolean(configType)} title={configType === 'drainage' ? '配置引流信息报备字段' : '配置签名报备字段'}>
        <div className="admin-system-modal-form">
          <Select label="报备字段库字段" onChange={(event) => setDrainageFieldId(event.target.value)} options={[{ label: '请选择字段', value: '' }, ...libraryFields.map((field) => ({ label: `${field.name ?? field.code}（${fieldTypeLabel[String(field.fieldType)] ?? field.fieldType}）`, value: field.id }))]} value={drainageFieldId} />
          <Select label="是否必填" onChange={(event) => setRequired(event.target.value === 'true')} options={[{ label: '选填', value: 'false' }, { label: '必填', value: 'true' }]} value={String(required)} />
          <Textarea label="通道报备说明" onChange={(event) => setDescription(event.target.value)} rows={4} value={description} />
        </div>
      </Modal>
    </section>
  );
}