import { useEffect, useState } from 'react';
import { Search, Smartphone, UserX } from 'lucide-react';
import { adminApi, type SmsMessageRecord, type SmsUplinkMatchCandidate, type SmsUplinkMessage } from '@/api/adminApi';
import {
  Breadcrumb,
  Button,
  DateRangeInput,
  Input,
  Modal,
  Pagination,
  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({
  blacklistFeedback,
  blacklisting,
  claimError,
  claimingId,
  detailError,
  matchedRecords,
  matching,
  message,
  onAddBlacklist,
  onClaim,
  onClose,
}: {
  blacklistFeedback: string;
  blacklisting: boolean;
  claimError: string;
  claimingId: string;
  detailError: string;
  matchedRecords: SmsMessageRecord[];
  matching: boolean;
  message: SmsUplinkMessage;
  onAddBlacklist: () => void;
  onClaim: (candidate: SmsUplinkMatchCandidate) => void;
  onClose: () => void;
}) {
  const candidates = message.matchCandidates ?? [];
  return (
    <Modal
      footer={<>
        {message.tenantId && message.applicationId ? (
          <Button disabled={blacklisting} icon={<UserX size={15} />} onClick={onAddBlacklist}>
            {blacklisting ? '加入中...' : '加入应用黑名单'}
          </Button>
        ) : null}
        <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.gatewayMessageId || '-'}</strong>
            </div>
            <div>
              <span>关联平台消息ID</span>
              <strong>{message.messageRecord?.messageId ?? message.messageId ?? '-'}</strong>
            </div>
            <div>
              <span>匹配状态</span>
              <strong>{matchStatusText(message.matchStatus)}</strong>
            </div>
            <div className="admin-uplink-info-grid__full">
              <span>匹配说明</span>
              <strong>{message.matchReason || '-'}</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>
          {blacklistFeedback ? <p className={blacklistFeedback.startsWith('已') ? 'form-success' : 'form-error'}>{blacklistFeedback}</p> : null}
          {matching ? <p>正在查询真实下发记录...</p> : null}
          {detailError ? <p className="form-error">{detailError}</p> : null}
          {!matching && matchedRecords.length === 0 && !detailError ? (
            <div className="admin-uplink-empty-match">
              {message.matchStatus === 'ambiguous' ? '存在多个候选，请先认领正确应用' : '暂无匹配发送记录'}
            </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('');
  const [blacklisting, setBlacklisting] = useState(false);
  const [blacklistFeedback, setBlacklistFeedback] = useState('');
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const pageSize = 10;

  function loadData(targetPage = page, filters = { phoneKeyword, contentKeyword, dateRange }) {
    setLoading(true);
    adminApi.listAdminUplinkMessagesPage({
      phoneNumber: filters.phoneKeyword.trim() || undefined,
      keyword: filters.contentKeyword.trim() || undefined,
      startTime: filters.dateRange.start ? `${filters.dateRange.start}T00:00:00+08:00` : undefined,
      endTime: filters.dateRange.end ? `${filters.dateRange.end}T23:59:59.999+08:00` : undefined,
      page: targetPage,
      pageSize,
    })
      .then((result) => {
        setMessages(result.items);
        setTotal(result.total);
        setError('');
      })
      .catch((reason: Error) => setError(reason.message || '短信上行记录加载失败'))
      .finally(() => setLoading(false));
  }

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

    if (message.messageRecord || !message.messageId) {
      return;
    }

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

  function handleAddBlacklist() {
    if (!selectedMessage?.tenantId || !selectedMessage.applicationId) {
      setBlacklistFeedback('请先匹配或认领企业应用');
      return;
    }
    if (!window.confirm(`确认将 ${selectedMessage.phoneNumber} 加入当前应用黑名单？`)) {
      return;
    }
    setBlacklisting(true);
    setBlacklistFeedback('');
    adminApi.createEnterpriseBlacklist({
      tenantId: selectedMessage.tenantId,
      applicationId: selectedMessage.applicationId,
      phoneNumber: selectedMessage.phoneNumber,
      reason: '上行短信人工加入',
      status: 'active',
    })
      .then(() => setBlacklistFeedback('已加入当前应用黑名单'))
      .catch((reason: Error) => setBlacklistFeedback(reason.message || '加入应用黑名单失败'))
      .finally(() => setBlacklisting(false));
  }

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

  function resetFilters() {
    setDateRange({});
    setPhoneKeyword('');
    setContentKeyword('');
    setPage(1);
    loadData(1, { phoneKeyword: '', contentKeyword: '', dateRange: {} });
  }

  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));
        setMatchedRecords(updated.messageRecord ? [updated.messageRecord] : []);
        loadData(page);
      })
      .catch((reason: Error) => setClaimError(reason.message || '上行认领失败'))
      .finally(() => setClaimingId(''));
  }

  const columns: Array<TableColumn<SmsUplinkMessage>> = [
    {
      key: 'select',
      title: '',
      width: '48px',
      align: 'center',
      render: () => <input aria-label="选择上行记录" className="admin-uplink-checkbox" type="checkbox" />,
    },
    { key: 'phoneNumber', title: '手机号码', width: '120px', render: (record) => <strong>{record.phoneNumber}</strong> },
    { key: 'receivedAt', title: '上行时间', width: '156px', render: (record) => <strong>{getTime(record.receivedAt)}</strong> },
    { key: 'content', title: '上行内容', width: '260px', render: (record) => <span className="uplink-content" title={record.content}>{record.content}</span> },
    { key: 'channel', title: '上行通道', width: '160px', render: (record) => <strong>{record.channel?.name ?? record.channelId}</strong> },
    { key: 'accessNo', title: '上行接入号', width: '120px', render: (record) => <strong>{record.destId}</strong> },
    { key: 'matchStatus', title: '匹配状态', width: '100px', render: (record) => <strong>{matchStatusText(record.matchStatus)}</strong> },
    {
      key: 'actions',
      title: '操作',
      width: '88px',
      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={() => { setPage(1); loadData(1); }}>查询</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 ? [] : messages} emptyText={loading ? '正在加载真实上行短信记录...' : '暂无上行短信记录'} pagination={false} rowKey="id" />
        <Pagination page={page} totalPages={Math.max(1, Math.ceil(total / pageSize))} total={total} onPageChange={setPage} onPrevious={() => setPage((value) => Math.max(1, value - 1))} onNext={() => setPage((value) => Math.min(Math.max(1, Math.ceil(total / pageSize)), value + 1))} previousDisabled={page <= 1} nextDisabled={page >= Math.max(1, Math.ceil(total / pageSize))} />
      </div>

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