import { AlertTriangle, Info, MessageSquare } from 'lucide-react';
import type { SmsMessageRecord, SmsMessageSegmentAudit } from '@/api/adminApi';
import { Button, CarrierTag, Modal, Tag } from '@/components/ui';
import { DrainageContent } from './SmsRecordList';
import {
  buildRouteRows,
  getReceiptNotice,
  getRecordStatus,
  getRecordStatusLabel,
  getTime,
  statusToneMap,
} from './smsRecordModel';

type SendDetailModalProps = {
  record: SmsMessageRecord;
  segmentAudits: SmsMessageSegmentAudit[];
  segmentLoading: boolean;
  onClose: () => void;
};

export function SendDetailModal({ record, segmentAudits, segmentLoading, onClose }: SendDetailModalProps) {
  const visibleWordDecisions = record.channelWordDecisions?.filter(
    (decision) => decision.snapshot.hits.length > 0 || Boolean(decision.snapshot.reason),
  );
  const routeRows = buildRouteRows(record, segmentAudits);
  const channelGroupNames = Array.from(new Set(routeRows.map((route) => route.channelGroup).filter(Boolean)));
  const orderedSegmentAudits = [...segmentAudits].sort((left, right) => {
    const timeDiff = new Date(left.createdAt).getTime() - new Date(right.createdAt).getTime();
    return timeDiff || left.segmentIndex - right.segmentIndex || left.id.localeCompare(right.id);
  });
  const sentAccessNumber = `${record.channel?.srcId ?? ''}${record.applicationExtension ?? ''}`;
  const displayStatus = getRecordStatus(record);
  const receiptNotice = getReceiptNotice(record);

  return (
    <Modal
      footer={
        <Button onClick={onClose} variant="ghost">
          关闭
        </Button>
      }
      onClose={onClose}
      open
      size="xl"
      title={
        <div className="template-modal-title">
          <h2>发送详情</h2>
          <p>{record.messageId}</p>
        </div>
      }
    >
      <div className="admin-sms-send-detail">
        {visibleWordDecisions?.length ? (
          <section aria-label="通道筛选原因">
            <h3>通道筛选原因</h3>
            {visibleWordDecisions.map((decision) => (
              <div key={decision.id}>
                <p>
                  {getTime(decision.decidedAt)} · {decision.snapshot.reason || '已排除命中通道，按剩余候选选路'}
                </p>
                {decision.snapshot.hits.map((hit) => (
                  <p key={hit.channelId}>
                    通道 {hit.channelName || hit.channelId}：命中 {hit.count} 个词，
                    {hit.samples.map((sample) => `“${sample.word}”`).join('、')}
                    {hit.count > hit.samples.length ? '（仅展示部分）' : ''}
                  </p>
                ))}
              </div>
            ))}
          </section>
        ) : null}
        <section aria-label="引流发送资格">
          <h3>引流发送资格</h3>
          {record.drainageGate ? (
            <>
              <p>
                {record.drainageGate.reason ||
                  (record.drainageGate.targets.length
                    ? '引流信息资格检查通过；发送仍受通道及其他规则限制'
                    : '未检测到引流信息')}
              </p>
              {record.drainageGate.targets.map((target, index) => (
                <p key={index}>
                  {target.text} · {target.materialIds.length ? '已匹配审核通过的资料' : '未匹配有效资料'}
                </p>
              ))}
            </>
          ) : (
            <p className="muted">{segmentLoading ? '正在加载引流资格校验结果…' : '未执行引流资格校验'}</p>
          )}
        </section>
        <div className="admin-sms-detail-overview">
          <div>
            <span>最终状态</span>
            <Tag tone={statusToneMap[displayStatus] ?? 'info'}>{getRecordStatusLabel(record)}</Tag>
          </div>
          <div>
            <span>提交状态</span>
            <strong>{record.submitStatus ?? '-'}</strong>
          </div>
          <div>
            <span>回执状态</span>
            <strong>{record.receiptStatus ?? '-'}</strong>
          </div>
          <div>
            <span>最终回执时间</span>
            <strong>{getTime(record.deliveredAt)}</strong>
          </div>
          <div>
            <span>引流信息</span>
            <Tag tone={record.hasDrainageContent === true ? 'warning' : 'neutral'}>
              {record.hasDrainageContent === true
                ? '含引流'
                : record.hasDrainageContent === false
                  ? '不含引流'
                  : '未检测'}
            </Tag>
          </div>
          <div>
            <span>提交时间</span>
            <strong>{getTime(record.queuedAt)}</strong>
          </div>
          <div>
            <span>发送号码</span>
            <strong>{record.phoneNumber || '-'}</strong>
          </div>
          <div>
            <span>号码归属</span>
            <strong>
              {record.province ?? '-'} / {record.carrier ? <CarrierTag carrier={record.carrier} /> : '-'}
            </strong>
          </div>
          <div>
            <span>通道组</span>
            <strong>{channelGroupNames.join(' / ') || '-'}</strong>
          </div>
          <div>
            <span>收到的接入号</span>
            <strong>{record.clientSrcId || '-'}</strong>
          </div>
          <div>
            <span>发送的接入号</span>
            <strong>{sentAccessNumber || '-'}</strong>
          </div>
        </div>
        {receiptNotice ? (
          <div className="admin-sms-detail-notice" role="status">
            <Info size={20} />
            <strong>{receiptNotice}</strong>
          </div>
        ) : null}
        <section>
          <h3>
            <MessageSquare size={18} /> 短信内容
          </h3>
          <p className="admin-sms-detail-content">
            <DrainageContent record={record} />
          </p>
          {record.originalContent != null ? (
            <>
              <h3>原始短信内容</h3>
              <p className="admin-sms-detail-content">{record.originalContent}</p>
            </>
          ) : null}
          {record.originalContent != null
            ? record.submitRecords
                ?.filter((submit) => submit.sentContent != null)
                .map((submit, index) => (
                  <div key={submit.id}>
                    <h3>
                      第 {index + 1} 次提交通道内容 · {submit.channel?.name ?? submit.channelId}
                    </h3>
                    <p className="admin-sms-detail-content">{submit.sentContent}</p>
                  </div>
                ))
            : null}
        </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>
                    <div>
                      <dt>提交状态</dt>
                      <dd>{route.submitStatus ?? '-'}</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>{getRecordStatusLabel(record)}</strong>
            </div>
            <div>
              <span>提交状态</span>
              <strong>{record.submitStatus ?? '-'}</strong>
            </div>
            <div>
              <span>回执状态</span>
              <strong>{record.receiptStatus ?? '-'}</strong>
            </div>
          </div>
          {['submit_failed', 'failed', 'rejected'].includes(displayStatus) ? (
            <div className="admin-sms-detail-failure" role="alert">
              <AlertTriangle size={20} />
              <div>
                <span>失败原因</span>
                <strong>{record.errorMessage ?? record.errorCode ?? '未返回明确失败原因'}</strong>
              </div>
            </div>
          ) : null}
        </section>

        <section>
          <h3>分片补偿审计</h3>
          {segmentLoading ? (
            <div className="ui-table__empty">加载中...</div>
          ) : segmentAudits.length === 0 ? (
            <div className="ui-table__empty">暂无分片审计</div>
          ) : (
            <div className="admin-sms-segment-list">
              {orderedSegmentAudits.map((segment) => (
                <article className="admin-sms-segment-card" key={segment.id}>
                  <header>
                    <strong>
                      分片 {segment.segmentIndex}/{segment.segmentTotal}
                    </strong>
                    <div>
                      <Tag
                        tone={
                          segment.submitStatus === 'accepted'
                            ? 'success'
                            : segment.submitStatus === 'queued'
                              ? 'info'
                              : 'danger'
                        }
                      >
                        {segment.submitStatus}
                      </Tag>
                      {segment.receiptStatus ? (
                        <Tag
                          tone={
                            segment.receiptStatus === 'delivered'
                              ? 'success'
                              : segment.receiptStatus === 'unknown'
                                ? 'neutral'
                                : 'danger'
                          }
                        >
                          {segment.receiptStatus}
                        </Tag>
                      ) : null}
                    </div>
                  </header>
                  <dl>
                    <div>
                      <dt>通道</dt>
                      <dd>{segment.channel?.name ?? segment.channelId ?? '-'}</dd>
                    </div>
                    <div>
                      <dt>Sequence</dt>
                      <dd>{segment.sequenceId ?? '-'}</dd>
                    </div>
                    <div>
                      <dt>提交 ID</dt>
                      <dd>{segment.submitId}</dd>
                    </div>
                    <div>
                      <dt>网关 MsgId</dt>
                      <dd>{segment.gatewayMessageId ?? '-'}</dd>
                    </div>
                    <div>
                      <dt>补偿方式</dt>
                      <dd>{segment.compensationType ?? '-'}</dd>
                    </div>
                    <div>
                      <dt>审计时间</dt>
                      <dd>{getTime(segment.createdAt)}</dd>
                    </div>
                    <div>
                      <dt>错误信息</dt>
                      <dd>{segment.errorMessage ?? segment.errorCode ?? '-'}</dd>
                    </div>
                  </dl>
                </article>
              ))}
            </div>
          )}
        </section>
      </div>
    </Modal>
  );
}