import { useEffect, useMemo, useState } from 'react';
import { Search, Smartphone } from 'lucide-react';
import { adminApi, type SmsMessageRecord, type SmsUplinkMatchCandidate, type SmsUplinkMessage } from '@/api/adminApi';
import {
  Breadcrumb,
  Button,
  DateRangeInput,
  Input,
  Modal,
  Table,
  type DateRangeValue,
  type TableColumn,
} from '@/components/ui';

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

function getTime(value?: string | null) {
  return value ? `${value.slice(0, 10)} ${value.slice(11, 19)}` : '-';
}

function matchStatusText(status?: string | null) {
  const map: Record<string, string> = {
    matched: '已匹配',
    ambiguous: '待认领',
    unmatched: '未匹配',
  };
  return status ? (map[status] ?? status) : '-';
}

function candidateStatusText(status?: string | null) {
  const map: Record<string, string> = {
    pending: '待认领',
    claimed: '已认领',
    rejected: '已排除',
  };
  return status ? (map[status] ?? status) : '-';
}

function UplinkDetailModal({
  claimError,
  claimingId,
  detailError,
  matchedRecords,
  matching,
  message,
  onClaim,
  onClose,
}: {
  claimError: string;
  claimingId: string;
  detailError: string;
  matchedRecords: SmsMessageRecord[];
  matching: boolean;
  message: SmsUplinkMessage;
  onClaim: (candidate: SmsUplinkMatchCandidate) => void;
  onClose: () => void;
}) {
  const candidates = message.matchCandidates ?? [];
  return (
    <Modal
      footer={<Button onClick={onClose} variant="ghost">关闭</Button>}
      onClose={onClose}
      open
      size="xl"
      title="上行短信详情"
    >
      <div className="admin-uplink-detail">
        <section className="admin-uplink-info-card">
          <h3>上行信息</h3>
          <div className="admin-uplink-info-grid">
            <div>
              <span>手机号码</span>
              <strong>{message.phoneNumber || '-'}</strong>
            </div>
            <div>
              <span>上行时间</span>
              <strong>{getTime(message.receivedAt)}</strong>
            </div>
            <div>
              <span>上行企业</span>
              <strong>{message.tenant?.name ?? message.tenantId ?? '-'}</strong>
            </div>
            <div>
              <span>上行通道</span>
              <strong>{message.channel?.name ?? message.channelId ?? '-'}</strong>
            </div>
            <div>
              <span>上行接入号</span>
              <strong>{message.destId || '-'}</strong>
            </div>
            <div>
              <span>网关消息ID</span>
              <strong>{message.messageId || '-'}</strong>
            </div>
            <div>
              <span>匹配状态</span>
              <strong>{matchStatusText(message.matchStatus)}</strong>
            </div>
            <div className="admin-uplink-info-grid__full">
              <span>上行内容</span>
              <strong>{message.content || '-'}</strong>
            </div>
          </div>
        </section>

        <section className="admin-uplink-match-section">
          <h3>候选认领</h3>
          {claimError ? <p className="form-error">{claimError}</p> : null}
          {candidates.length === 0 ? <div className="admin-uplink-empty-match">暂无人工认领候选</div> : null}
          {candidates.map((candidate) => (
            <article className="admin-uplink-match-card" key={candidate.id}>
              <div className="admin-uplink-match-grid">
                <div>
                  <span>候选企业</span>
                  <strong>{candidate.tenant?.name ?? candidate.tenantId}</strong>
                </div>
                <div>
                  <span>候选应用</span>
                  <strong>{candidate.application?.name ?? candidate.applicationId}</strong>
                </div>
                <div>
                  <span>候选来源</span>
                  <strong>{candidate.matchSource === 'access_number' ? '接入号' : '手机号时间窗'}</strong>
                </div>
                <div>
                  <span>置信度</span>
                  <strong>{candidate.confidence}</strong>
                </div>
                <div>
                  <span>状态</span>
                  <strong>{candidateStatusText(candidate.status)}</strong>
                </div>
                <div>
                  <span>下发短信</span>
                  <strong>{candidate.messageRecord?.messageId ?? '-'}</strong>
                </div>
              </div>
              {candidate.messageRecord ? (
                <div className="admin-uplink-match-content">
                  <span>下发内容</span>
                  <p>{candidate.messageRecord.content}</p>
                </div>
              ) : null}
              <div className="admin-uplink-candidate-footer">
                <span>{candidate.reason ?? '-'}</span>
                <Button
                  disabled={claimingId === candidate.id || candidate.status === 'claimed' || candidate.status === 'rejected'}
                  onClick={() => onClaim(candidate)}
                  size="sm"
                >
                  {candidate.status === 'claimed' ? '已认领' : claimingId === candidate.id ? '认领中...' : '认领并推送'}
                </Button>
              </div>
            </article>
          ))}
        </section>

        <section className="admin-uplink-match-section">
          <h3>匹配发送记录</h3>
          {matching ? <p>正在查询真实下发记录...</p> : null}
          {detailError ? <p className="form-error">{detailError}</p> : null}
          {!matching && !message.messageId ? <div className="admin-uplink-empty-match">该上行记录没有网关消息ID，无法匹配下发记录</div> : null}
          {!matching && message.messageId && matchedRecords.length === 0 && !detailError ? (
            <div className="admin-uplink-empty-match">暂无匹配发送记录</div>
          ) : null}
          {matchedRecords.map((record) => (
            <article className="admin-uplink-match-card" key={record.id}>
              <div className="admin-uplink-match-grid">
                <div>
                  <span>发送时间</span>
                  <strong>{getTime(record.queuedAt)}</strong>
                </div>
                <div>
                  <span>发送企业</span>
                  <strong>{record.tenant?.name ?? record.tenantId ?? '-'}</strong>
                </div>
                <div>
                  <span>发送应用</span>
                  <strong>{record.application?.name ?? record.applicationId ?? '-'}</strong>
                </div>
                <div>
                  <span>客户提交接入号</span>
                  <strong>{record.channel?.srcId ?? '-'}</strong>
                </div>
              </div>
              <div className="admin-uplink-match-content">
                <span>下发内容</span>
                <p>{record.content}</p>
              </div>
            </article>
          ))}
        </section>
      </div>
    </Modal>
  );
}

export function AdminSmsUplinkRecordsPage() {
  const [messages, setMessages] = useState<SmsUplinkMessage[]>([]);
  const [matchedRecords, setMatchedRecords] = useState<SmsMessageRecord[]>([]);
  const [dateRange, setDateRange] = useState<DateRangeValue>({});
  const [phoneKeyword, setPhoneKeyword] = useState('');
  const [contentKeyword, setContentKeyword] = useState('');
  const [selectedMessage, setSelectedMessage] = useState<SmsUplinkMessage | null>(null);
  const [loading, setLoading] = useState(true);
  const [matching, setMatching] = useState(false);
  const [claimingId, setClaimingId] = useState('');
  const [error, setError] = useState('');
  const [detailError, setDetailError] = useState('');
  const [claimError, setClaimError] = useState('');

  function loadData() {
    setLoading(true);
    adminApi.listAdminUplinkMessages()
      .then((items) => {
        setMessages(items);
        setError('');
      })
      .catch((reason: Error) => setError(reason.message || '短信上行记录加载失败'))
      .finally(() => setLoading(false));
  }

  function openDetail(message: SmsUplinkMessage) {
    setSelectedMessage(message);
    setMatchedRecords([]);
    setDetailError('');
    setClaimError('');

    if (!message.messageId) {
      return;
    }

    setMatching(true);
    adminApi.listOperationMessages({ tenantId: message.tenantId ?? undefined, messageId: message.messageId })
      .then((items) => setMatchedRecords(items))
      .catch((reason: Error) => setDetailError(reason.message || '匹配发送记录加载失败'))
      .finally(() => setMatching(false));
  }

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

  const filteredMessages = useMemo(
    () => messages.filter((item) => {
      const receivedDate = getDate(item.receivedAt);
      const matchesStartDate = !dateRange.start || receivedDate >= dateRange.start;
      const matchesEndDate = !dateRange.end || receivedDate <= dateRange.end;
      const matchesPhone = !phoneKeyword || item.phoneNumber.includes(phoneKeyword);
      const matchesContent = !contentKeyword || item.content.includes(contentKeyword);
      return matchesStartDate && matchesEndDate && matchesPhone && matchesContent;
    }),
    [contentKeyword, dateRange.end, dateRange.start, messages, phoneKeyword],
  );

  function resetFilters() {
    setDateRange({});
    setPhoneKeyword('');
    setContentKeyword('');
  }

  function handleClaim(candidate: SmsUplinkMatchCandidate) {
    if (!selectedMessage) {
      return;
    }
    setClaimingId(candidate.id);
    setClaimError('');
    adminApi.claimUplinkMatchCandidate(selectedMessage.id, { candidateId: candidate.id })
      .then((updated) => {
        setMessages((items) => items.map((item) => (item.id === updated.id ? { ...item, ...updated } : item)));
        setSelectedMessage((current) => (current && current.id === updated.id ? { ...current, ...updated } : current));
        loadData();
      })
      .catch((reason: Error) => setClaimError(reason.message || '上行认领失败'))
      .finally(() => setClaimingId(''));
  }

  const columns: Array<TableColumn<SmsUplinkMessage>> = [
    {
      key: 'select',
      title: '',
      width: '72px',
      align: 'center',
      render: () => <input aria-label="选择上行记录" className="admin-uplink-checkbox" type="checkbox" />,
    },
    { key: 'phoneNumber', title: '手机号码', width: '170px', render: (record) => <strong>{record.phoneNumber}</strong> },
    { key: 'receivedAt', title: '上行时间', width: '220px', render: (record) => <strong>{getTime(record.receivedAt)}</strong> },
    { key: 'content', title: '上行内容', width: '360px', render: (record) => <span className="uplink-content" title={record.content}>{record.content}</span> },
    { key: 'channel', title: '上行通道', width: '260px', render: (record) => <strong>{record.channel?.name ?? record.channelId}</strong> },
    { key: 'accessNo', title: '上行接入号', width: '180px', render: (record) => <strong>{record.destId}</strong> },
    { key: 'matchStatus', title: '匹配状态', width: '140px', render: (record) => <strong>{matchStatusText(record.matchStatus)}</strong> },
    {
      key: 'actions',
      title: '操作',
      width: '140px',
      align: 'center',
      render: (record) => (
        <button className="admin-uplink-detail-link" onClick={() => openDetail(record)} type="button">查看详情</button>
      ),
    },
  ];

  return (
    <section className="page-stack admin-uplink-page">
      <div className="page-heading">
        <div>
          <Breadcrumb items={['数据详单', '短信上行记录']} />
          <h1>短信上行记录</h1>
        </div>
      </div>

      <div className="surface admin-uplink-filter">
        <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} />
        <div className="admin-uplink-filter__actions">
          <Button icon={<Search size={16} />} onClick={loadData}>查询</Button>
          <Button onClick={resetFilters} variant="ghost">重置</Button>
        </div>
      </div>

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

      <div className="surface admin-uplink-table-card">
        <Table columns={columns} data={loading ? [] : filteredMessages} emptyText={loading ? '正在加载真实上行短信记录...' : '暂无上行短信记录'} rowKey="id" />
      </div>

      {selectedMessage ? (
        <UplinkDetailModal
          claimError={claimError}
          claimingId={claimingId}
          detailError={detailError}
          matchedRecords={matchedRecords}
          matching={matching}
          message={selectedMessage}
          onClaim={handleClaim}
          onClose={() => setSelectedMessage(null)}
        />
      ) : null}
    </section>
  );
}