import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { AlertTriangle, BarChart3, CheckCircle2, Eye, RefreshCw, Search, TimerReset } from 'lucide-react';
import { adminApi, type DownstreamDeliveryDashboard, type DownstreamDeliveryRecord, type DownstreamRequeuePreview, type DownstreamRequeueTask, type DownstreamRequeueTaskItem, type EnterpriseApplication, type TenantOption } from '@/api/adminApi';
import { Breadcrumb, Button, DateRangeInput, Input, Modal, Pagination, Select, Tag, Textarea, type DateRangeValue } from '@/components/ui';
import { formatDateTime } from '@/utils/dateTime';

const statusTone: Record<string, 'neutral' | 'info' | 'success' | 'warning' | 'danger'> = {
  pending: 'warning',
  manual_requeueing: 'info',
  awaiting_ack: 'info',
  delivered: 'success',
  failed: 'danger',
  unconfirmed: 'warning',
  rejected: 'danger',
};

const statusLabel: Record<string, string> = {
  manual_requeueing: '人工重投处理中',
  awaiting_ack: '等待客户端确认',
  delivered: '客户端已确认',
  failed: '投递失败',
  unconfirmed: '客户端未确认',
  rejected: '客户端拒绝',
};

function deliveryStatusLabel(record: DownstreamDeliveryRecord) {
  if (record.status !== 'pending') return statusLabel[record.status] ?? record.status;
  if (record.manualRetryCount > 0) return '人工重投排队中';
  if (record.retryCount > 0) return '等待自动重试';
  return '待首次投递';
}

const deliveryTypeLabel: Record<string, string> = {
  receipt: '状态回执',
  uplink: '上行短信',
};

const attemptStatusLabel: Record<string, string> = {
  awaiting_ack: '等待客户端确认',
  acknowledged: '客户端已确认',
  rejected: '客户端拒绝',
  failed: '投递失败',
};

const requeueTaskStatusLabel: Record<string, string> = {
  queued: '排队中', running: '执行中', paused: '已暂停', completed: '已完成',
  partial_completed: '部分完成', terminated: '已终止',
};

const requeueItemStatusLabel: Record<string, string> = {
  queued: '排队中', processing: '处理中', waiting_connection: '等待连接',
  waiting_external_ack: '等待其他链路确认', waiting_ack: '等待客户确认', success: '成功',
  failed: '失败', skipped: '跳过', unprocessed: '未处理',
};

function requeueTone(status: string) {
  if (status === 'completed' || status === 'success') return 'success' as const;
  if (status === 'partial_completed' || status === 'failed') return 'danger' as const;
  if (status === 'paused' || status === 'skipped' || status === 'unprocessed') return 'warning' as const;
  return 'info' as const;
}

type RequeueTarget =
  | { kind: 'single'; record: DownstreamDeliveryRecord }
  | { kind: 'batch'; ids: string[] };

type RequeueResult = {
  status: 'success' | 'partial' | 'failed';
  title: string;
  message: string;
  failures?: string[];
};

function formatLocalDate(value: Date) {
  return `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}-${String(value.getDate()).padStart(2, '0')}`;
}

function recentSevenDays(): DateRangeValue {
  const end = new Date();
  const start = new Date(end);
  start.setDate(end.getDate() - 6);
  return { start: formatLocalDate(start), end: formatLocalDate(end) };
}

function attemptStatusTone(status: string) {
  if (status === 'acknowledged') return 'success' as const;
  if (status === 'rejected' || status === 'failed') return 'danger' as const;
  if (status === 'awaiting_ack') return 'info' as const;
  return 'neutral' as const;
}

function DeliveryDetailModal({ record, onClose }: { record: DownstreamDeliveryRecord; onClose: () => void }) {
  const payloadText = useMemo(() => JSON.stringify(record.payload ?? {}, null, 2), [record.payload]);

  return (
    <Modal
      open
      onClose={onClose}
      size="xl"
      title={<div className="template-modal-title"><h2>下游投递详情</h2><p>{record.id}</p></div>}
      footer={<Button onClick={onClose}>关闭</Button>}
    >
      <div className="report-record-detail">
        <div className="detail-grid">
          <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>{deliveryTypeLabel[record.deliveryType] ?? record.deliveryType}</strong></div>
          <div><span>当前状态</span><strong>{deliveryStatusLabel(record)}</strong></div>
          <div><span>消息 ID</span><strong>{record.messageId ?? '-'}</strong></div>
          <div><span>自动重试次数</span><strong>{record.retryCount}</strong></div>
          <div><span>人工重投次数</span><strong>{record.manualRetryCount}</strong></div>
          <div><span>最近人工重投</span><strong>{record.lastRetriedAt ? formatDateTime(record.lastRetriedAt) : '-'}</strong></div>
          <div><span>下次重试</span><strong>{record.nextRetryAt ?? '-'}</strong></div>
          <div><span>自动重试</span><strong>{record.retryEnabled ? '开启' : '关闭'}</strong></div>
          <div><span>写出时间</span><strong>{record.sentAt ?? '-'}</strong></div>
          <div><span>确认时间</span><strong>{record.acknowledgedAt ?? '-'}</strong></div>
          <div><span>ACK Result</span><strong>{record.ackResult ?? '-'}</strong></div>
          <div><span>ACK Sequence_Id</span><strong>{record.ackSequenceId ?? '-'}</strong></div>
          <div><span>ACK Msg_Id</span><strong>{record.ackMessageId ?? '-'}</strong></div>
          <div><span>连接 ID</span><strong>{record.connectionId ?? '-'}</strong></div>
          <div className="detail-grid__wide"><span>最后错误</span><strong>{record.lastError ?? '-'}</strong></div>
        </div>
        <section className="report-history">
          <h3>逐次投递记录</h3>
          <div className="downstream-attempt-timeline" aria-label="逐次投递记录">
            {(record.attempts ?? []).map((attempt) => (
              <article className="downstream-attempt-card" key={attempt.id}>
                <div className={`downstream-attempt-marker downstream-attempt-marker--${attemptStatusTone(attempt.status)}`}>
                  {attempt.attemptNo}
                </div>
                <div className="downstream-attempt-card__body">
                  <header>
                    <strong>第 {attempt.attemptNo} 次投递</strong>
                    <Tag tone={attemptStatusTone(attempt.status)}>{attemptStatusLabel[attempt.status] ?? attempt.status}</Tag>
                  </header>
                  <dl className="downstream-attempt-card__times">
                    <div><dt>发送时间</dt><dd>{attempt.sentAt ? formatDateTime(attempt.sentAt) : '-'}</dd></div>
                    <div><dt>ACK 时间</dt><dd>{attempt.acknowledgedAt ? formatDateTime(attempt.acknowledgedAt) : '-'}</dd></div>
                    <div><dt>ACK 截止</dt><dd>{attempt.ackDeadlineAt ? formatDateTime(attempt.ackDeadlineAt) : '-'}</dd></div>
                  </dl>
                  <dl className="downstream-attempt-card__identifiers">
                    <div><dt>连接 ID</dt><dd>{attempt.connectionId ?? '-'}</dd></div>
                    <div><dt>Sequence_Id</dt><dd>{attempt.sequenceId ?? '-'}</dd></div>
                    <div><dt>Msg_Id</dt><dd>{attempt.messageId ?? '-'}</dd></div>
                  </dl>
                  <div className={`downstream-attempt-result${attempt.errorMessage || attempt.failureType ? ' downstream-attempt-result--error' : ''}`}>
                    <span>ACK Result：{attempt.ackResult ?? '-'}</span>
                    <strong>{attempt.errorMessage ?? attempt.failureType ?? '本次投递未记录异常'}</strong>
                  </div>
                </div>
              </article>
            ))}
            {(record.attempts ?? []).length === 0 ? <p>暂无逐次投递记录</p> : null}
          </div>
        </section>
        <section className="report-history">
          <h3>Payload</h3>
          <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', margin: 0 }}>{payloadText}</pre>
        </section>
      </div>
    </Modal>
  );
}

export function AdminDownstreamDeliveriesPage() {
  const [records, setRecords] = useState<DownstreamDeliveryRecord[]>([]);
  const [dashboard, setDashboard] = useState<DownstreamDeliveryDashboard | null>(null);
  const [applications, setApplications] = useState<EnterpriseApplication[]>([]);
  const [tenants, setTenants] = useState<TenantOption[]>([]);
  const [keyword, setKeyword] = useState('');
  const [status, setStatus] = useState('all');
  const [deliveryType, setDeliveryType] = useState('all');
  const [applicationId, setApplicationId] = useState('all');
  const [tenantId, setTenantId] = useState('all');
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [detail, setDetail] = useState<DownstreamDeliveryRecord | null>(null);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [dateRange, setDateRange] = useState<DateRangeValue>(recentSevenDays);
  const [requeueTarget, setRequeueTarget] = useState<RequeueTarget | null>(null);
  const [requeueBusy, setRequeueBusy] = useState(false);
  const [requeueResult, setRequeueResult] = useState<RequeueResult | null>(null);
  const requeueInFlightRef = useRef(false);
  const [taskPreview, setTaskPreview] = useState<DownstreamRequeuePreview | null>(null);
  const [taskPreviewBusy, setTaskPreviewBusy] = useState(false);
  const [taskReason, setTaskReason] = useState('');
  const [taskRate, setTaskRate] = useState(10);
  const [taskCreateBusy, setTaskCreateBusy] = useState(false);
  const [requeueTasks, setRequeueTasks] = useState<DownstreamRequeueTask[]>([]);
  const [requeueTaskStatus, setRequeueTaskStatus] = useState('all');
  const [requeueTaskPage, setRequeueTaskPage] = useState(1);
  const [requeueTaskTotal, setRequeueTaskTotal] = useState(0);
  const [selectedTask, setSelectedTask] = useState<DownstreamRequeueTask | null>(null);
  const [taskItems, setTaskItems] = useState<DownstreamRequeueTaskItem[]>([]);
  const [taskItemStatus, setTaskItemStatus] = useState('all');
  const [taskItemKeyword, setTaskItemKeyword] = useState('');
  const [taskItemAppliedKeyword, setTaskItemAppliedKeyword] = useState('');
  const [taskItemPage, setTaskItemPage] = useState(1);
  const [taskItemTotal, setTaskItemTotal] = useState(0);

  const currentTaskFilter = useCallback(() => ({
    keyword: keyword || undefined,
    status,
    deliveryType,
    tenantId,
    applicationId,
    createdAtFrom: dateRange.start,
    createdAtTo: dateRange.end,
  }), [applicationId, dateRange.end, dateRange.start, deliveryType, keyword, status, tenantId]);

  const loadRequeueTasks = useCallback(() => {
    adminApi.listDownstreamRequeueTasks({ status: requeueTaskStatus, page: requeueTaskPage, pageSize: 10 })
      .then((response) => { setRequeueTasks(response.items); setRequeueTaskTotal(response.total); })
      .catch((failure: Error) => setError(failure.message || '后台重投任务加载失败'));
  }, [requeueTaskPage, requeueTaskStatus]);

  const loadData = useCallback(() => {
    setLoading(true);
    Promise.all([
      adminApi.getDownstreamDeliveryDashboard({
        applicationId,
        tenantId,
        deliveryType,
        createdAtFrom: dateRange.start,
        createdAtTo: dateRange.end,
      }),
      adminApi.listDownstreamDeliveries({
        keyword,
        status,
        deliveryType,
        applicationId,
        tenantId,
        page,
        pageSize,
        createdAtFrom: dateRange.start,
        createdAtTo: dateRange.end,
      }),
      adminApi.listEnterpriseApplications(),
      adminApi.listTenants(),
    ])
      .then(([dashboardResponse, response, apps, tenantOptions]) => {
        setDashboard(dashboardResponse);
        setRecords(response.items);
        setTotal(response.total);
        setApplications(apps);
        setTenants(tenantOptions);
        setSelectedIds((current) => current.filter((id) => response.items.some((item) => item.id === id)));
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '下游投递记录加载失败'))
      .finally(() => setLoading(false));
  }, [applicationId, dateRange.end, dateRange.start, deliveryType, keyword, page, pageSize, status, tenantId]);

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

  useEffect(() => {
    loadRequeueTasks();
    const timer = window.setInterval(loadRequeueTasks, 3000);
    return () => window.clearInterval(timer);
  }, [loadRequeueTasks]);

  const openTaskPreview = async () => {
    setTaskPreviewBusy(true);
    setError('');
    try {
      setTaskPreview(await adminApi.previewDownstreamRequeueTask(currentTaskFilter()));
      setTaskReason('');
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : '后台重投范围预检失败');
    } finally {
      setTaskPreviewBusy(false);
    }
  };

  const createRequeueTask = async () => {
    if (!taskPreview || taskReason.trim().length < 5) return;
    setTaskCreateBusy(true);
    try {
      await adminApi.createDownstreamRequeueTask({ previewToken: taskPreview.previewToken, reason: taskReason.trim(), ratePerSecond: taskRate, consecutiveFailureLimit: 10 });
      setTaskPreview(null);
      loadRequeueTasks();
    } catch (failure) {
      setError(failure instanceof Error ? failure.message : '后台重投任务创建失败');
    } finally {
      setTaskCreateBusy(false);
    }
  };

  const filteredApplications = useMemo(
    () => applications.filter((item) => tenantId === 'all' || item.tenantId === tenantId),
    [applications, tenantId],
  );

  const openTaskDetail = async (id: string) => {
    try {
      const task = await adminApi.getDownstreamRequeueTask(id);
      setSelectedTask(task);
      setTaskItemStatus('all'); setTaskItemKeyword(''); setTaskItemAppliedKeyword(''); setTaskItemPage(1);
    } catch (failure) { setError(failure instanceof Error ? failure.message : '任务详情加载失败'); }
  };

  const loadTaskItems = useCallback(() => {
    if (!selectedTask) return;
    adminApi.listDownstreamRequeueTaskItems(selectedTask.id, { status: taskItemStatus, keyword: taskItemAppliedKeyword || undefined, page: taskItemPage, pageSize: 20 })
      .then((response) => { setTaskItems(response.items); setTaskItemTotal(response.total); })
      .catch((failure: Error) => setError(failure.message || '任务明细加载失败'));
  }, [selectedTask, taskItemAppliedKeyword, taskItemPage, taskItemStatus]);

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

  const replayableStatuses = useMemo(() => new Set(['pending', 'delivered', 'failed', 'unconfirmed', 'rejected']), []);
  const selectableIds = useMemo(
    () => records.filter((item) => replayableStatuses.has(item.status)).map((item) => item.id),
    [records, replayableStatuses],
  );
  const allSelected = selectableIds.length > 0 && selectableIds.every((id) => selectedIds.includes(id));
  const summary = dashboard?.summary;
  const typeBreakdown = dashboard?.typeBreakdown ?? [];
  const retryBuckets = dashboard?.retryBuckets ?? [];
  const topApplications = dashboard?.topApplications ?? [];

  const totalPages = Math.max(1, Math.ceil(total / pageSize));

  const openSingleRequeue = (record: DownstreamDeliveryRecord) => {
    setRequeueResult(null);
    setRequeueTarget({ kind: 'single', record });
  };

  const openBatchRequeue = () => {
    if (selectedIds.length === 0) return;
    setRequeueResult(null);
    setRequeueTarget({ kind: 'batch', ids: [...selectedIds] });
  };

  const closeRequeueDialog = () => {
    if (requeueBusy) return;
    setRequeueTarget(null);
    setRequeueResult(null);
  };

  const confirmRequeue = async () => {
    if (!requeueTarget || requeueInFlightRef.current) return;
    requeueInFlightRef.current = true;
    setRequeueBusy(true);
    setRequeueResult(null);
    setError('');
    try {
      if (requeueTarget.kind === 'single') {
        const updated = await adminApi.requeueDownstreamDelivery(requeueTarget.record.id);
        setRequeueResult({
          status: 'success',
          title: '重投请求已受理',
          message: `${deliveryTypeLabel[updated.deliveryType] ?? updated.deliveryType}已进入人工重投流程，当前状态为“${deliveryStatusLabel(updated)}”，人工重投次数 ${updated.manualRetryCount} 次。`,
        });
      } else {
        const result = await adminApi.batchRequeueDownstreamDeliveries(requeueTarget.ids);
        const failures = result.results
          .filter((item) => item.status === 'failed')
          .map((item) => `${item.id}：${item.errorMessage || '重投失败'}`);
        setRequeueResult({
          status: result.failedCount === 0 ? 'success' : result.successCount > 0 ? 'partial' : 'failed',
          title: result.failedCount === 0 ? '批量重投已受理' : result.successCount > 0 ? '批量重投部分完成' : '批量重投失败',
          message: `共处理 ${result.total} 条，成功 ${result.successCount} 条，失败 ${result.failedCount} 条。`,
          failures,
        });
        setSelectedIds([]);
      }
      loadData();
    } catch (failure) {
      setRequeueResult({
        status: 'failed',
        title: '重投请求未确认成功',
        message: failure instanceof Error && failure.message ? failure.message : '人工重投失败，请先检查列表状态和系统日志，避免重复提交。',
      });
    } finally {
      requeueInFlightRef.current = false;
      setRequeueBusy(false);
    }
  };

  return (
    <section className="page-stack admin-sms-task-page report-record-page">
      <div className="page-heading">
        <div>
          <Breadcrumb items={['数据详单', '下游投递记录']} />
          <h1>下游投递记录</h1>
        </div>
      </div>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="dashboard-grid">
        <div className="surface mini-status-card">
          <BarChart3 size={22} />
          <div>
            <span>投递总量</span>
            <strong>{summary?.total ?? 0}</strong>
            <small>当前筛选范围内的真实下游投递记录。</small>
          </div>
        </div>
        <div className="surface mini-status-card">
          <TimerReset size={22} />
          <div>
            <span>待投递</span>
            <strong>{summary?.pending ?? 0}</strong>
            <small>其中积压告警 {summary?.stalledPending ?? 0} 条。</small>
          </div>
        </div>
        <div className="surface mini-status-card">
          <CheckCircle2 size={22} />
          <div>
            <span>客户端已确认</span>
            <strong>{summary?.delivered ?? 0}</strong>
            <small>已收到 Result=0 的 CMPP_DELIVER_RESP。</small>
          </div>
        </div>
        <div className="surface mini-status-card">
          <AlertTriangle size={22} />
          <div>
            <span>告警</span>
            <strong>{summary?.alertCount ?? 0}</strong>
            <small>近期失败 {summary?.recentFailed ?? 0} 条。</small>
          </div>
        </div>
      </div>

      <div className="surface ui-filter-row">
        <Input label="消息ID / 账号 / 手机号 / 错误" onChange={(event) => setKeyword(event.target.value)} placeholder="请输入关键字" value={keyword} />
        <DateRangeInput label="创建日期" onChange={(value) => { setDateRange(value); setPage(1); }} value={dateRange} />
        <Select
          label="企业"
          options={[{ label: '全部企业', value: 'all' }, ...tenants.map((item) => ({ label: item.name, value: item.id }))]}
          value={tenantId}
          onChange={(event) => { setTenantId(event.target.value); setApplicationId('all'); setPage(1); }}
        />
        <Select
          label="状态"
          options={[
            { label: '全部状态', value: 'all' },
            { label: '待投递', value: 'pending' },
            { label: '等待客户端确认', value: 'awaiting_ack' },
            { label: '客户端已确认', value: 'delivered' },
            { label: '客户端未确认', value: 'unconfirmed' },
            { label: '客户端拒绝', value: 'rejected' },
            { label: '最终失败', value: 'failed' },
          ]}
          value={status}
          onChange={(event) => {
            setStatus(event.target.value);
            setPage(1);
          }}
        />
        <Select
          label="类型"
          options={[
            { label: '全部类型', value: 'all' },
            { label: '状态回执', value: 'receipt' },
            { label: '上行短信', value: 'uplink' },
          ]}
          value={deliveryType}
          onChange={(event) => {
            setDeliveryType(event.target.value);
            setPage(1);
          }}
        />
        <Select
          label="应用"
          options={[
            { label: '全部应用', value: 'all' },
            ...filteredApplications.map((item) => ({ label: item.name, value: item.id })),
          ]}
          value={applicationId}
          onChange={(event) => {
            setApplicationId(event.target.value);
            setPage(1);
          }}
        />
        <div className="admin-task-filter__actions ui-filter-actions">
          <Button icon={<Search size={16} />} onClick={loadData}>查询</Button>
          <Button
            onClick={() => {
              setKeyword('');
              setStatus('all');
              setDeliveryType('all');
              setTenantId('all');
              setApplicationId('all');
              setDateRange(recentSevenDays());
              setPage(1);
            }}
            variant="ghost"
          >
            重置
          </Button>
        </div>
      </div>

      <div className="overview-grid">
        <div className="surface">
          <div className="section-heading">
            <h2>类型分布</h2>
          </div>
          <div className="downstream-breakdown-table">
            <div className="downstream-breakdown-table__head downstream-breakdown-table__head--ack">
              <span>类型</span>
              <span>总量</span>
              <span>待投递</span>
              <span>待确认</span>
              <span>客户端已确认</span>
              <span>未确认/拒绝</span>
              <span>最终失败</span>
            </div>
            {typeBreakdown.map((item) => (
              <div className="downstream-breakdown-table__row downstream-breakdown-table__row--ack" key={item.deliveryType}>
                <strong>{deliveryTypeLabel[item.deliveryType] ?? item.deliveryType}</strong>
                <span>{item.total ?? 0}</span>
                <span>{item.pending ?? 0}</span>
                <span>{item.awaitingAck ?? 0}</span>
                <span>{item.delivered ?? 0}</span>
                <span>{(item.unconfirmed ?? 0) + (item.rejected ?? 0)}</span>
                <span>{item.failed ?? 0}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="surface">
          <div className="section-heading">
            <h2>重试压力</h2>
          </div>
          <div className="downstream-bucket-list">
            {retryBuckets.map((item) => (
              <div className="downstream-bucket-item" key={item.label}>
                <span>{item.label}</span>
                <strong>{item.count}</strong>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="surface">
        <div className="section-heading">
          <h2>应用告警排行</h2>
        </div>
        <div className="downstream-breakdown-table">
          <div className="downstream-breakdown-table__head downstream-breakdown-table__head--apps">
            <span>应用</span>
            <span>待投递</span>
            <span>异常</span>
            <span>已投递</span>
            <span>告警合计</span>
          </div>
          {topApplications.length > 0 ? topApplications.map((item) => (
            <div className="downstream-breakdown-table__row downstream-breakdown-table__row--apps" key={item.applicationId}>
              <strong>{item.name}</strong>
              <span>{item.pending ?? 0}</span>
              <span>{(item.failed ?? 0) + (item.unconfirmed ?? 0) + (item.rejected ?? 0)}</span>
              <span>{item.delivered ?? 0}</span>
              <span>{item.alertCount ?? 0}</span>
            </div>
          )) : (
            <div className="downstream-breakdown-table__empty">暂无应用告警数据</div>
          )}
        </div>
      </div>

      <div className="surface admin-task-table-card report-task-table-card">
        <div className="downstream-delivery-toolbar">
          <p>
            已选择 <strong>{selectedIds.length}</strong> 条；客户端已确认的记录也允许人工重投，请注意重复处理风险。
          </p>
          <div>
            <label className="downstream-page-size">
              每页
              <select value={pageSize} onChange={(event) => { setPageSize(Number(event.target.value)); setPage(1); setSelectedIds([]); }}>
                <option value={10}>10条</option>
                <option value={25}>25条</option>
                <option value={50}>50条</option>
              </select>
            </label>
            <Button disabled={taskPreviewBusy} onClick={() => void openTaskPreview()} variant="secondary">
              {taskPreviewBusy ? '范围预检中…' : '按筛选条件重投'}
            </Button>
            <Button
              disabled={selectableIds.length === 0}
              onClick={() => setSelectedIds(allSelected ? [] : selectableIds)}
              variant="ghost"
            >
              {allSelected ? '取消全选当前页' : '全选当前页'}
            </Button>
            <Button
              icon={<RefreshCw size={14} />}
              disabled={selectedIds.length === 0 || requeueBusy}
              onClick={openBatchRequeue}
              variant="secondary"
            >
              批量重投
            </Button>
          </div>
        </div>
        <div className="downstream-delivery-list" role="table" aria-label="下游投递记录">
          <div className="downstream-delivery-list__header" role="row">
            <span>选择</span>
            <span>投递信息</span>
            <span>企业 / 应用</span>
            <span>消息 ID</span>
            <span>状态</span>
            <span>重试</span>
            <span>最后错误</span>
            <span>操作</span>
          </div>
          {records.length > 0 ? records.map((record) => (
            <div className="downstream-delivery-list__row" role="row" key={record.id}>
              <div className="downstream-delivery-list__select" role="cell">
                <input
                  type="checkbox"
                  disabled={!replayableStatuses.has(record.status)}
                  checked={selectedIds.includes(record.id)}
                  onChange={(event) => {
                    setSelectedIds((current) => event.target.checked
                      ? [...current, record.id]
                      : current.filter((item) => item !== record.id));
                  }}
                  aria-label={`选择${record.id}`}
                />
              </div>
              <div className="downstream-delivery-list__meta" role="cell">
                <strong>{deliveryTypeLabel[record.deliveryType] ?? record.deliveryType}</strong>
                <span>{formatDateTime(record.createdAt)}</span>
              </div>
              <div className="downstream-delivery-list__owner" role="cell">
                <strong>{record.tenant?.name ?? '-'}</strong>
                <span>{record.application?.name ?? '-'}</span>
              </div>
              <div className="downstream-delivery-list__message" role="cell">
                <strong>{record.messageId ?? '-'}</strong>
              </div>
              <div role="cell">
                <Tag tone={statusTone[record.status] ?? 'info'}>{deliveryStatusLabel(record)}</Tag>
              </div>
              <div className="downstream-delivery-list__retry" role="cell">
                <strong>{record.retryCount}</strong>
                <span>自动 / {record.manualRetryCount} 人工</span>
              </div>
              <div className={`downstream-delivery-list__error${record.lastError ? '' : ' is-empty'}`} role="cell" title={record.lastError ?? undefined}>
                {record.lastError ?? '无'}
              </div>
              <div className="downstream-delivery-list__actions" role="cell">
                <Button icon={<Eye size={14} />} onClick={() => setDetail(record)} size="sm" variant="ghost">详情</Button>
                <Button
                  disabled={!replayableStatuses.has(record.status) || requeueBusy}
                  icon={<RefreshCw size={14} />}
                  onClick={() => openSingleRequeue(record)}
                  size="sm"
                  variant="secondary"
                >
                  重投
                </Button>
              </div>
            </div>
          )) : (
            <div className="downstream-delivery-list__empty">{loading ? '加载中...' : '暂无下游投递记录'}</div>
          )}
        </div>
        <Pagination
          total={total}
          page={page}
          totalPages={totalPages}
          onPageChange={setPage}
          previousDisabled={page <= 1}
          nextDisabled={page >= totalPages}
          onPrevious={() => setPage((current) => Math.max(1, current - 1))}
          onNext={() => setPage((current) => Math.min(totalPages, current + 1))}
        />
      </div>

      <div className="surface admin-task-table-card report-task-table-card downstream-requeue-task-card">
        <div className="section-heading downstream-requeue-task-heading">
          <div><h2>后台重投任务</h2><p className="muted">按筛选快照安全恢复，支持暂停、继续、终止和完整结果追踪。</p></div>
          <div className="downstream-requeue-task-heading__actions">
            <Select
              aria-label="任务状态"
              options={[
                { label: '全部状态', value: 'all' }, { label: '排队中', value: 'queued' }, { label: '执行中', value: 'running' },
                { label: '已暂停', value: 'paused' }, { label: '已完成', value: 'completed' }, { label: '部分完成', value: 'partial_completed' }, { label: '已终止', value: 'terminated' },
              ]}
              value={requeueTaskStatus}
              onChange={(event) => { setRequeueTaskStatus(event.target.value); setRequeueTaskPage(1); }}
            />
            <Button icon={<RefreshCw size={15} />} onClick={loadRequeueTasks} variant="ghost">刷新</Button>
          </div>
        </div>
        <div className="downstream-requeue-task-list">
          {requeueTasks.map((task) => (
            <article key={task.id}>
              <div className="downstream-requeue-task-list__identity"><strong>{task.taskNo}</strong><span>{formatDateTime(task.createdAt)}</span><small>{task.createdBy?.displayName || task.createdBy?.username || '系统创建'}</small></div>
              <div className="downstream-requeue-task-list__scope"><span>{task.tenant?.name ?? '全部企业'} · {task.application?.name ?? '多个应用'}</span><strong>{task.reason}</strong></div>
              <div className="downstream-requeue-task-list__progress">
                <div><Tag tone={requeueTone(task.status)}>{requeueTaskStatusLabel[task.status] ?? task.status}</Tag><strong>{task.successCount + task.failedCount + task.skippedCount}/{task.totalCount}</strong></div>
                <div className="downstream-requeue-task-list__meter"><span style={{ width: `${task.totalCount ? Math.min(100, ((task.successCount + task.failedCount + task.skippedCount) / task.totalCount) * 100) : 0}%` }} /></div>
                <small>成功 {task.successCount} · 失败 {task.failedCount} · 跳过 {task.skippedCount} · 等待 {task.waitingCount}</small>
              </div>
              <div className="downstream-requeue-task-list__actions">
                <Button icon={<Eye size={14} />} onClick={() => void openTaskDetail(task.id)} size="sm" variant="ghost">详情</Button>
                {task.status === 'running' || task.status === 'queued' ? <Button onClick={() => void adminApi.changeDownstreamRequeueTaskStatus(task.id, 'pause').then(loadRequeueTasks)} size="sm" variant="secondary">暂停</Button> : null}
                {task.status === 'paused' ? <Button onClick={() => void adminApi.changeDownstreamRequeueTaskStatus(task.id, 'resume').then(loadRequeueTasks)} size="sm" variant="secondary">继续</Button> : null}
                {['queued', 'running', 'paused'].includes(task.status) ? <Button onClick={() => void adminApi.changeDownstreamRequeueTaskStatus(task.id, 'terminate').then(loadRequeueTasks)} size="sm" variant="warning">终止</Button> : null}
              </div>
            </article>
          ))}
          {requeueTasks.length === 0 ? <p className="muted">暂无后台重投任务</p> : null}
        </div>
        <Pagination
          total={requeueTaskTotal}
          page={requeueTaskPage}
          totalPages={Math.max(1, Math.ceil(requeueTaskTotal / 10))}
          onPageChange={setRequeueTaskPage}
          previousDisabled={requeueTaskPage <= 1}
          nextDisabled={requeueTaskPage >= Math.max(1, Math.ceil(requeueTaskTotal / 10))}
          onPrevious={() => setRequeueTaskPage((current) => Math.max(1, current - 1))}
          onNext={() => setRequeueTaskPage((current) => Math.min(Math.max(1, Math.ceil(requeueTaskTotal / 10)), current + 1))}
        />
      </div>

      {detail ? <DeliveryDetailModal record={detail} onClose={() => setDetail(null)} /> : null}
      {taskPreview ? (
        <Modal open onClose={() => !taskCreateBusy && setTaskPreview(null)} title={<div className="template-modal-title"><h2>创建下游后台重投任务</h2><p>确认范围、执行速度和安全边界后进入后台排队</p></div>} size="xl" footer={<><Button disabled={taskCreateBusy} onClick={() => setTaskPreview(null)} variant="ghost">取消</Button><Button disabled={taskCreateBusy || taskPreview.replayableCount === 0 || taskReason.trim().length < 5} onClick={() => void createRequeueTask()} variant="warning">{taskCreateBusy ? '创建中…' : `创建任务 · ${taskPreview.replayableCount} 条`}</Button></>}>
          <div className="downstream-requeue-preview">
            <div className="downstream-requeue-preview__summary">
              <div><span>筛选命中</span><strong>{taskPreview.matchedCount}</strong><small>严格按当前筛选快照</small></div>
              <div className="is-primary"><span>可安全重投</span><strong>{taskPreview.replayableCount}</strong><small>将物化为任务项</small></div>
              <div><span>规则跳过</span><strong>{taskPreview.skippedCount}</strong><small>不调用 Gateway</small></div>
              <div><span>涉及应用</span><strong>{taskPreview.applicationCount}</strong><small>按应用独立限速</small></div>
            </div>
            <div className="detail-grid downstream-requeue-preview__meta">
              <div><span>最早记录</span><strong>{taskPreview.oldestCreatedAt ? formatDateTime(taskPreview.oldestCreatedAt) : '-'}</strong></div>
              <div><span>快照时间</span><strong>{formatDateTime(taskPreview.snapshotAt)}</strong></div>
            </div>
            <div className="downstream-requeue-preview__distribution"><span>状态分布</span><div>{Object.entries(taskPreview.statusCounts).map(([key, value]) => <Tag key={key} tone={statusTone[key] ?? 'neutral'}>{statusLabel[key] ?? key} {value}</Tag>)}</div></div>
            <Select label="执行速度" value={String(taskRate)} onChange={(event) => setTaskRate(Number(event.target.value))} options={[{ label: '平稳（每应用10条/秒）', value: '10' }, { label: '快速（每应用20条/秒）', value: '20' }, { label: '低速（每应用5条/秒）', value: '5' }]} />
            <Textarea
              className="downstream-requeue-reason"
              error={taskReason.length > 0 && taskReason.trim().length < 5 ? '任务原因至少填写 5 个字' : undefined}
              hint={`请填写事故原因、工单号或处理说明 · ${taskReason.length}/200`}
              id="downstream-requeue-task-reason"
              label="任务原因"
              maxLength={200}
              onChange={(event) => setTaskReason(event.target.value)}
              placeholder="例如：工单 INC-20260814，重新投递客户已确认的历史回执"
              required
              rows={4}
              value={taskReason}
            />
            <div className="downstream-requeue-warning"><AlertTriangle size={20} /><div><strong>重复投递风险</strong><p>任务支持待投递、失败、未确认、拒绝和客户端已确认记录；已确认记录会再次发送，可能导致客户端重复处理。正在等待 ACK 的记录仍不会并发重投，客户离线时进入等待。</p></div></div>
          </div>
        </Modal>
      ) : null}
      {selectedTask ? (
        <Modal open onClose={() => setSelectedTask(null)} title={<div className="template-modal-title"><h2>后台重投任务详情</h2><p>{selectedTask.taskNo}</p></div>} size="xl" footer={<Button onClick={() => setSelectedTask(null)}>关闭</Button>}>
          <div className="report-record-detail downstream-requeue-task-detail">
            <div className="detail-grid">
              <div><span>状态</span><strong><Tag tone={requeueTone(selectedTask.status)}>{requeueTaskStatusLabel[selectedTask.status] ?? selectedTask.status}</Tag></strong></div><div className="detail-grid__wide"><span>任务原因</span><strong>{selectedTask.reason}</strong></div>
              <div><span>企业 / 应用</span><strong>{selectedTask.tenant?.name ?? '全部企业'} / {selectedTask.application?.name ?? '多个应用'}</strong></div>
              <div><span>创建人</span><strong>{selectedTask.createdBy?.displayName || selectedTask.createdBy?.username || '系统创建'}</strong></div>
              <div><span>快照时间</span><strong>{formatDateTime(selectedTask.snapshotAt)}</strong></div><div><span>执行速度</span><strong>每应用 {selectedTask.ratePerSecond} 条/秒</strong></div>
              <div><span>总数</span><strong>{selectedTask.totalCount}</strong></div><div><span>成功</span><strong>{selectedTask.successCount}</strong></div>
              <div><span>失败</span><strong>{selectedTask.failedCount}</strong></div><div><span>跳过</span><strong>{selectedTask.skippedCount}</strong></div>
              <div><span>等待</span><strong>{selectedTask.waitingCount}</strong></div><div><span>未处理</span><strong>{selectedTask.itemCounts?.unprocessed ?? 0}</strong></div>
            </div>
            {selectedTask.lastError ? <div className="downstream-requeue-detail-alert"><AlertTriangle size={17} /><span>{selectedTask.lastError}</span></div> : null}
            <section className="downstream-requeue-detail-section">
              <div className="section-heading"><div><h3>完整任务明细</h3><p className="muted">共 {taskItemTotal} 条，可按结果和原因查询全部历史项。</p></div></div>
              <div className="downstream-requeue-detail-filter">
                <Select options={[{ label: '全部结果', value: 'all' }, ...Object.entries(requeueItemStatusLabel).map(([value, label]) => ({ value, label }))]} value={taskItemStatus} onChange={(event) => { setTaskItemStatus(event.target.value); setTaskItemPage(1); }} />
                <Input placeholder="消息 ID / 错误 / 跳过原因" value={taskItemKeyword} onChange={(event) => setTaskItemKeyword(event.target.value)} />
                <Button icon={<Search size={14} />} onClick={() => {
                  const nextKeyword = taskItemKeyword.trim();
                  if (taskItemPage !== 1) setTaskItemPage(1);
                  if (nextKeyword !== taskItemAppliedKeyword) setTaskItemAppliedKeyword(nextKeyword);
                  else if (taskItemPage === 1) loadTaskItems();
                }} variant="secondary">查询</Button>
              </div>
              <div className="downstream-requeue-detail-items">
                <div className="downstream-requeue-detail-items__head"><span>消息 ID</span><span>结果</span><span>原状态</span><span>原因</span><span>更新时间</span></div>
                {taskItems.map((item) => <div key={item.id}><strong>{item.delivery.messageId ?? '-'}</strong><Tag tone={requeueTone(item.status)}>{requeueItemStatusLabel[item.status] ?? item.status}</Tag><span>{statusLabel[item.previousStatus] ?? item.previousStatus}</span><span>{item.skipReason ?? item.errorMessage ?? '—'}</span><time>{formatDateTime(item.updatedAt)}</time></div>)}
                {taskItems.length === 0 ? <p className="muted">没有符合条件的任务明细</p> : null}
              </div>
              <Pagination
                total={taskItemTotal} page={taskItemPage} totalPages={Math.max(1, Math.ceil(taskItemTotal / 20))} onPageChange={setTaskItemPage}
                previousDisabled={taskItemPage <= 1} nextDisabled={taskItemPage >= Math.max(1, Math.ceil(taskItemTotal / 20))}
                onPrevious={() => setTaskItemPage((current) => Math.max(1, current - 1))}
                onNext={() => setTaskItemPage((current) => Math.min(Math.max(1, Math.ceil(taskItemTotal / 20)), current + 1))}
              />
            </section>
          </div>
        </Modal>
      ) : null}
      {requeueTarget ? (
        <Modal
          footer={requeueResult ? (
            <Button onClick={closeRequeueDialog}>关闭</Button>
          ) : (
            <>
              <Button disabled={requeueBusy} onClick={closeRequeueDialog} variant="ghost">取消</Button>
              <Button disabled={requeueBusy} icon={<RefreshCw size={15} />} onClick={() => void confirmRequeue()} variant="warning">
                {requeueBusy ? '重投处理中…' : requeueTarget.kind === 'single' ? '确认重投' : `确认重投 ${requeueTarget.ids.length} 条`}
              </Button>
            </>
          )}
          onClose={closeRequeueDialog}
          open
          title={requeueResult?.title ?? (requeueTarget.kind === 'single' ? '确认人工重投' : '确认批量人工重投')}
        >
          {requeueResult ? (
            <div className={`downstream-requeue-result downstream-requeue-result--${requeueResult.status}`} role={requeueResult.status === 'success' ? 'status' : 'alert'}>
              <span aria-hidden="true">
                {requeueResult.status === 'success' ? <CheckCircle2 size={28} /> : <AlertTriangle size={28} />}
              </span>
              <div>
                <p>{requeueResult.message}</p>
                {requeueResult.failures?.length ? (
                  <ul>
                    {requeueResult.failures.map((item, index) => <li key={`${index}-${item}`}>{item}</li>)}
                  </ul>
                ) : null}
                {requeueResult.status === 'failed' ? <small>请求结果不明确时，请先刷新并核对人工重投次数，避免重复投递。</small> : null}
              </div>
            </div>
          ) : (
            <div className="downstream-requeue-confirm">
              <AlertTriangle aria-hidden="true" size={24} />
              <div>
                <p>
                  {requeueTarget.kind === 'single'
                    ? `${requeueTarget.record.status === 'delivered' ? '该记录已收到客户端确认。' : ''}确认重投这条${deliveryTypeLabel[requeueTarget.record.deliveryType] ?? requeueTarget.record.deliveryType}吗？`
                    : `即将重投所选 ${requeueTarget.ids.length} 条下游投递记录。`}
                </p>
                {requeueTarget.kind === 'single' ? <small>消息 ID：{requeueTarget.record.messageId ?? '-'}</small> : null}
                <strong>重投可能导致下游业务重复处理，请确认客户侧能够正确去重。</strong>
              </div>
            </div>
          )}
        </Modal>
      ) : null}
    </section>
  );
}