import { useEffect, useMemo, useState } from 'react';
import { Download, MessageSquare, Search, Smartphone } from 'lucide-react';
import { adminApi, type SmsMessageRecord, type SmsMessageSegmentAudit, type SmsReceiptRecord, type SmsSubmitRecord } from '@/api/adminApi';
import { Breadcrumb, Button, DateRangeInput, Input, Modal, Pagination, Select, Tag, Table, type DateRangeValue, type TableColumn } from '@/components/ui';

const statusLabelMap: Record<string, string> = {
  delivered: '发送成功',
  queued: '排队中',
  submitted: '已提交',
  unknown: '未知',
  failed: '失败',
  rejected: '已拒绝',
};

const statusToneMap: Record<string, 'success' | 'neutral' | 'danger' | 'info'> = {
  delivered: 'success',
  queued: 'info',
  submitted: 'info',
  unknown: 'neutral',
  failed: 'danger',
  rejected: 'danger',
};

const statusDotClassMap: Record<string, string> = {
  delivered: 'is-success',
  queued: 'is-unknown',
  submitted: 'is-unknown',
  unknown: 'is-unknown',
  failed: 'is-failed',
  rejected: 'is-failed',
};

const carrierLabelMap: Record<string, string> = {
  mobile: '中国移动',
  unicom: '中国联通',
  telecom: '中国电信',
  all: '三网',
};

type RouteRow = {
  id: string;
  channel: string;
  sentAt?: string | null;
  receiptAt?: string | null;
  receiptCode?: string | null;
  submitStatus?: string | null;
};

function formatLocalDateTime(value?: string | null) {
  if (!value) {
    return null;
  }
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return null;
  }
  const parts = new Intl.DateTimeFormat('zh-CN', {
    timeZone: 'Asia/Shanghai',
    hour12: false,
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  }).formatToParts(date);
  const partMap = Object.fromEntries(parts.map((part) => [part.type, part.value]));
  return `${partMap.year}-${partMap.month}-${partMap.day} ${partMap.hour}:${partMap.minute}:${partMap.second}`;
}

function getDate(value?: string | null) {
  return formatLocalDateTime(value)?.slice(0, 10) ?? '';
}

function getTime(value?: string | null) {
  return formatLocalDateTime(value) ?? '-';
}

function getClock(value?: string | null) {
  return formatLocalDateTime(value)?.slice(11, 19) ?? '-';
}

function getStatusLabel(status?: string | null) {
  return status ? (statusLabelMap[status] ?? status) : '-';
}

function getCarrierLabel(carrier?: string | null) {
  return carrier ? (carrierLabelMap[carrier] ?? carrier) : '-';
}

function buildRouteRows(record: SmsMessageRecord): RouteRow[] {
  const receipts = record.receiptRecords ?? [];
  const receiptByGatewayId = new Map<string, SmsReceiptRecord>();
  receipts.forEach((receipt) => {
    if (receipt.gatewayMessageId) {
      receiptByGatewayId.set(receipt.gatewayMessageId, receipt);
    }
  });
  const submitRows = (record.submitRecords ?? []).map((submit, index) => {
    const receipt = submit.gatewayMessageId ? receiptByGatewayId.get(submit.gatewayMessageId) : undefined;
    return {
      id: submit.id || String(index + 1),
      channel: submit.channel?.name ?? record.channel?.name ?? submit.channelId ?? '-',
      sentAt: submit.submittedAt ?? submit.createdAt,
      receiptAt: receipt?.deliveredAt,
      receiptCode: receipt?.rawStatus,
      submitStatus: submit.submitStatus,
    };
  });
  if (submitRows.length > 0) {
    return submitRows;
  }
  return [{
    id: record.id,
    channel: record.channel?.name ?? record.channelId ?? '-',
    sentAt: record.submittedAt ?? record.queuedAt,
    receiptAt: record.deliveredAt,
    receiptCode: receipts[0]?.rawStatus,
    submitStatus: record.submitStatus,
  }];
}

function StatusLine({ status }: { status: string }) {
  return (
    <span className="admin-sms-record-status">
      <i className={statusDotClassMap[status] ?? 'is-unknown'} />
      {getStatusLabel(status)}
    </span>
  );
}

function csvCell(value: unknown) {
  const text = String(value ?? '');
  return `"${text.replace(/"/g, '""')}"`;
}

function downloadCsv(records: SmsMessageRecord[]) {
  const rows = [
    ['消息编号', '企业', '应用', '提交时间', '手机号', '地区', '运营商', '计费条数', '金额', '通道', '状态', '回执时间', '短信内容'],
    ...records.map((record) => [
      record.messageId,
      record.tenant?.name ?? record.tenantId,
      record.application?.name ?? record.applicationId ?? '',
      getTime(record.queuedAt),
      record.phoneNumber,
      record.channel?.sendRegion ?? '',
      getCarrierLabel(record.channel?.carrier),
      record.billingUnits,
      (record.amountCents / 100).toFixed(2),
      record.channel?.name ?? record.channelId ?? '',
      getStatusLabel(record.status),
      getTime(record.deliveredAt),
      record.content,
    ]),
  ];
  const blob = new Blob([`\uFEFF${rows.map((row) => row.map(csvCell).join(',')).join('\n')}`], { type: 'text/csv;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const anchor = document.createElement('a');
  anchor.href = url;
  anchor.download = `sms-records-${new Date().toISOString().slice(0, 10)}.csv`;
  anchor.click();
  URL.revokeObjectURL(url);
}

function SendDetailModal({
  record,
  segmentAudits,
  segmentColumns,
  segmentLoading,
  onClose,
}: {
  record: SmsMessageRecord;
  segmentAudits: SmsMessageSegmentAudit[];
  segmentColumns: Array<TableColumn<SmsMessageSegmentAudit>>;
  segmentLoading: boolean;
  onClose: () => void;
}) {
  const routeRows = buildRouteRows(record);
  return (
    <Modal
      footer={<Button onClick={onClose} variant="ghost">关闭</Button>}
      onClose={onClose}
      open
      size="xl"
      title="发送详情"
    >
      <div className="admin-sms-send-detail">
        <section>
          <h3><MessageSquare size={18} /> 短信内容</h3>
          <p className="admin-sms-detail-content">{record.content}</p>
        </section>

        <section>
          <h3>通道发送与回执</h3>
          <div className="admin-sms-route-list">
            {routeRows.map((route, index) => (
              <article key={route.id}>
                <span>{index + 1}</span>
                <div>
                  <strong>{route.channel}</strong>
                  <dl>
                    <div>
                      <dt>发送时间</dt>
                      <dd>{getTime(route.sentAt)}</dd>
                    </div>
                    <div>
                      <dt>回执时间</dt>
                      <dd>{getTime(route.receiptAt)}</dd>
                    </div>
                    <div>
                      <dt>回执码</dt>
                      <dd>{route.receiptCode ?? '-'}</dd>
                    </div>
                  </dl>
                </div>
              </article>
            ))}
          </div>
        </section>

        <section>
          <h3>状态信息</h3>
          <div className="admin-sms-detail-status-grid">
            <div><span>消息编号</span><strong>{record.messageId}</strong></div>
            <div><span>发送状态</span><strong>{getStatusLabel(record.status)}</strong></div>
            <div><span>提交状态</span><strong>{record.submitStatus ?? '-'}</strong></div>
            <div><span>回执状态</span><strong>{record.receiptStatus ?? '-'}</strong></div>
            <div><span>失败原因</span><strong>{record.errorMessage ?? record.errorCode ?? '-'}</strong></div>
          </div>
        </section>

        <section>
          <h3>分片补偿审计</h3>
          <Table
            columns={segmentColumns}
            data={segmentAudits}
            emptyText={segmentLoading ? '加载中...' : '暂无分片审计'}
            pagination={false}
            rowKey="id"
          />
        </section>
      </div>
    </Modal>
  );
}

export function AdminSmsRecordsPage() {
  const [records, setRecords] = useState<SmsMessageRecord[]>([]);
  const [enterprise, setEnterprise] = useState('all');
  const [application, setApplication] = useState('all');
  const [dateRange, setDateRange] = useState<DateRangeValue>({});
  const [phoneKeyword, setPhoneKeyword] = useState('');
  const [contentKeyword, setContentKeyword] = useState('');
  const [channelKeyword, setChannelKeyword] = useState('');
  const [status, setStatus] = useState('all');
  const [selectedRecord, setSelectedRecord] = useState<SmsMessageRecord | null>(null);
  const [segmentAudits, setSegmentAudits] = useState<SmsMessageSegmentAudit[]>([]);
  const [segmentLoading, setSegmentLoading] = useState(false);
  const [error, setError] = useState('');

  function loadData() {
    adminApi.listOperationMessages({
      tenantId: enterprise === 'all' ? undefined : enterprise,
      applicationId: application === 'all' ? undefined : application,
      phoneNumber: phoneKeyword || undefined,
      status: status === 'all' ? undefined : status,
    })
      .then((items) => {
        setRecords(items);
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '短信记录加载失败'));
  }

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

  useEffect(() => {
    if (!selectedRecord) {
      setSegmentAudits([]);
      return;
    }
    setSegmentLoading(true);
    adminApi.listMessageSegmentAudits({ messageRecordId: selectedRecord.id })
      .then((items) => {
        setSegmentAudits(items);
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '分片审计加载失败'))
      .finally(() => setSegmentLoading(false));
  }, [selectedRecord]);

  const enterpriseOptions = useMemo(() => {
    const tenants = new Map<string, string>();
    records.forEach((record) => tenants.set(record.tenantId, record.tenant?.name ?? record.tenantId));
    return [{ label: '全部企业', value: 'all' }, ...Array.from(tenants, ([value, label]) => ({ label, value }))];
  }, [records]);

  const applicationOptions = useMemo(() => {
    const applications = new Map<string, string>();
    records
      .filter((record) => enterprise === 'all' || record.tenantId === enterprise)
      .forEach((record) => {
        if (record.applicationId) {
          applications.set(record.applicationId, record.application?.name ?? record.applicationId);
        }
      });
    return [{ label: '全部应用', value: 'all' }, ...Array.from(applications, ([value, label]) => ({ label, value }))];
  }, [enterprise, records]);

  const filteredRows = useMemo(
    () => records.filter((item) => {
      const submittedDate = getDate(item.queuedAt);
      const matchesStartDate = !dateRange.start || submittedDate >= dateRange.start;
      const matchesEndDate = !dateRange.end || submittedDate <= dateRange.end;
      const matchesContent = !contentKeyword || item.content.includes(contentKeyword);
      const matchesChannel = !channelKeyword || (item.channel?.name ?? item.channelId ?? '').includes(channelKeyword);
      return matchesStartDate && matchesEndDate && matchesContent && matchesChannel;
    }),
    [channelKeyword, contentKeyword, dateRange.end, dateRange.start, records],
  );

  const segmentColumns: Array<TableColumn<SmsMessageSegmentAudit>> = [
    { key: 'segment', title: '分片', width: '90px', render: (record) => `${record.segmentIndex}/${record.segmentTotal}` },
    { key: 'submitId', title: '提交ID', width: '190px', render: (record) => <strong className="admin-task-id">{record.submitId}</strong> },
    { key: 'channel', title: '通道', width: '150px', render: (record) => record.channel?.name ?? record.channelId ?? '-' },
    { key: 'sequenceId', title: 'Sequence', width: '110px', render: (record) => record.sequenceId ?? '-' },
    { key: 'gatewayMessageId', title: 'MsgId', width: '180px', render: (record) => record.gatewayMessageId ?? '-' },
    { key: 'submitStatus', title: '提交状态', width: '110px', render: (record) => <Tag tone={record.submitStatus === 'accepted' ? 'success' : record.submitStatus === 'queued' ? 'info' : 'danger'}>{record.submitStatus}</Tag> },
    { key: 'receiptStatus', title: '回执状态', width: '110px', render: (record) => record.receiptStatus ? <Tag tone={record.receiptStatus === 'delivered' ? 'success' : record.receiptStatus === 'unknown' ? 'neutral' : 'danger'}>{record.receiptStatus}</Tag> : '-' },
    { key: 'compensation', title: '补偿', width: '120px', render: (record) => record.compensationType ?? '-' },
    { key: 'error', title: '错误', render: (record) => record.errorMessage ?? record.errorCode ?? '-' },
  ];

  function resetFilters() {
    setEnterprise('all');
    setApplication('all');
    setDateRange({});
    setPhoneKeyword('');
    setContentKeyword('');
    setChannelKeyword('');
    setStatus('all');
  }

  return (
    <section className="page-stack admin-sms-records-page">
      <div className="page-heading">
        <div>
          <Breadcrumb items={['数据详单', '短信记录']} />
          <h1>短信记录</h1>
        </div>
      </div>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="surface admin-sms-record-filter">
        <Select
          label="企业"
          onChange={(event) => {
            setEnterprise(event.target.value);
            setApplication('all');
          }}
          options={enterpriseOptions}
          value={enterprise}
        />
        <Select label="应用" onChange={(event) => setApplication(event.target.value)} options={applicationOptions} value={application} />
        <DateRangeInput label="提交日期" onChange={setDateRange} value={dateRange} />
        <Input label="手机号码" onChange={(event) => setPhoneKeyword(event.target.value)} prefix={<Smartphone size={16} />} value={phoneKeyword} />
        <Input label="短信内容" onChange={(event) => setContentKeyword(event.target.value)} value={contentKeyword} />
        <Input label="通道名称" onChange={(event) => setChannelKeyword(event.target.value)} value={channelKeyword} />
        <Select
          label="发送状态"
          onChange={(event) => setStatus(event.target.value)}
          options={[
            { label: '全部', value: 'all' },
            { label: '发送成功', value: 'delivered' },
            { label: '未知', value: 'unknown' },
            { label: '失败', value: 'failed' },
          ]}
          value={status}
        />
        <div className="admin-sms-record-filter__actions">
          <Button icon={<Search size={16} />} onClick={loadData}>查询</Button>
          <Button onClick={resetFilters} variant="ghost">重置</Button>
        </div>
      </div>

      <div className="surface admin-sms-record-table-card">
        <div className="admin-sms-record-toolbar">
          <Button icon={<Download size={16} />} onClick={() => downloadCsv(filteredRows)} variant="ghost">导出CSV</Button>
        </div>
        <div className="ui-table-wrap">
          <table className="ui-table admin-sms-record-table">
            <thead>
              <tr>
                <th style={{ width: '170px' }}>发送者</th>
                <th>短信内容</th>
                <th style={{ width: '170px' }}>手机号码</th>
                <th style={{ width: '300px' }}>通道与发送状态</th>
                <th style={{ textAlign: 'right', width: '120px' }}>操作</th>
              </tr>
            </thead>
            <tbody>
              {filteredRows.length === 0 ? (
                <tr>
                  <td className="ui-table__empty" colSpan={5}>暂无短信记录</td>
                </tr>
              ) : filteredRows.map((record) => (
                <tr key={record.id}>
                  <td>
                    <div className="admin-sms-record-sender">
                      <strong>{record.tenant?.name ?? record.tenantId}</strong>
                      <span>{record.application?.name ?? record.applicationId ?? '-'}</span>
                      <small>{getDate(record.queuedAt)}<br />{getClock(record.queuedAt)}</small>
                    </div>
                  </td>
                  <td><p className="admin-sms-record-content">{record.content}</p></td>
                  <td>
                    <div className="admin-sms-record-phone">
                      <strong>{record.phoneNumber}</strong>
                      <span>{record.channel?.sendRegion ?? '-'} {getCarrierLabel(record.channel?.carrier)}</span>
                      <small>{record.content.length}字/{record.billingUnits}条</small>
                    </div>
                  </td>
                  <td>
                    <div className="admin-sms-record-channel">
                      <strong>{record.channel?.name ?? record.channelId ?? '-'}</strong>
                      <StatusLine status={record.status} />
                      <span>{getTime(record.deliveredAt)}</span>
                    </div>
                  </td>
                  <td style={{ textAlign: 'right' }}>
                    <button className="admin-sms-record-detail-link" onClick={() => setSelectedRecord(record)} type="button">发送详情</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pagination total={filteredRows.length} />
      </div>

      {selectedRecord ? (
        <SendDetailModal
          onClose={() => setSelectedRecord(null)}
          record={selectedRecord}
          segmentAudits={segmentAudits}
          segmentColumns={segmentColumns}
          segmentLoading={segmentLoading}
        />
      ) : null}
    </section>
  );
}