import { Fragment, useEffect, useMemo, useState } from 'react';
import { BarChart3, CalendarClock, Eye, MapPin, Search, Send, Smartphone, StopCircle, TrendingUp } from 'lucide-react';
import { adminApi, type SmsBatchTask, type SmsMessageRecord } from '@/api/adminApi';
import { formatDateTime } from '@/utils/dateTime';
import {
  Breadcrumb,
  Button,
  DateRangeInput,
  InlineTextPreview,
  Input,
  Modal,
  Pagination,
  Select,
  Table,
  Tag,
  type DateRangeValue,
} from '@/components/ui';

type TaskStatus = 'sending' | 'completed' | 'terminated' | 'failed';
type SendType = 'immediate' | 'scheduled';

type CarrierStat = {
  name: string;
  total: number;
  success: number;
  tone: 'mobile' | 'unicom' | 'telecom';
};

type RegionStat = {
  region: string;
  total: number;
  success: number;
};

type SmsTask = {
  id: string;
  backendId: string;
  enterprise: string;
  application: string;
  submittedAt: string;
  templateContent: string;
  phoneCount: number;
  wordCount: number;
  billingCount: number;
  sendType: SendType;
  scheduledAt?: string | null;
  submittedCount: number;
  submittedSuccess: number;
  sentCount: number;
  successCount: number;
  failedCount: number;
  status: TaskStatus;
  rawStatus: string;
  carriers: CarrierStat[];
  regions: RegionStat[];
};

const statusLabels: Record<TaskStatus, string> = {
  sending: '发送中',
  completed: '已完成',
  terminated: '已终止',
  failed: '失败',
};

const statusTones: Record<TaskStatus, 'info' | 'success' | 'neutral' | 'danger'> = {
  sending: 'info',
  completed: 'success',
  terminated: 'neutral',
  failed: 'danger',
};

const sendTypeLabels: Record<SendType, string> = {
  immediate: '立即发送',
  scheduled: '定时发送',
};

const carrierLabels: Record<string, { label: string; tone: CarrierStat['tone'] }> = {
  mobile: { label: '中国移动', tone: 'mobile' },
  unicom: { label: '中国联通', tone: 'unicom' },
  telecom: { label: '中国电信', tone: 'telecom' },
  all: { label: '三网通道', tone: 'mobile' },
};

function formatNumber(value: number) {
  return value.toLocaleString('zh-CN');
}

function formatTime(value?: string | null) {
  return formatDateTime(value);
}

function normalizeTaskStatus(status: string): TaskStatus {
  if (['finished', 'completed', 'done'].includes(status)) return 'completed';
  if (['canceled', 'cancelled', 'terminated'].includes(status)) return 'terminated';
  if (['failed', 'rejected'].includes(status)) return 'failed';
  return 'sending';
}

function countMessages(messages: SmsMessageRecord[] | undefined, statuses: string[]) {
  return (messages ?? []).filter((message) => statuses.includes(message.status)).length;
}

function buildCarrierStats(messages: SmsMessageRecord[] | undefined): CarrierStat[] {
  const stats = new Map<string, CarrierStat>();
  (messages ?? []).forEach((message) => {
    const carrier = message.carrier ?? 'unknown';
    const meta = carrierLabels[carrier] ?? { label: carrier || '未知通道', tone: 'mobile' as const };
    const current = stats.get(carrier) ?? { name: meta.label, total: 0, success: 0, tone: meta.tone };
    current.total += 1;
    if (message.status === 'delivered') current.success += 1;
    stats.set(carrier, current);
  });
  return Array.from(stats.values());
}

function buildRegionStats(messages: SmsMessageRecord[] | undefined): RegionStat[] {
  const stats = new Map<string, RegionStat>();
  (messages ?? []).forEach((message) => {
    const region = message.province ?? '未识别省份';
    const current = stats.get(region) ?? { region, total: 0, success: 0 };
    current.total += 1;
    if (message.status === 'delivered') current.success += 1;
    stats.set(region, current);
  });
  return Array.from(stats.values()).sort((a, b) => b.total - a.total);
}

function buildCarrierStatsFromAggregates(stats: SmsBatchTask['messageStats']): CarrierStat[] {
  const totals = new Map<string, CarrierStat>();
  (stats ?? []).forEach((item) => {
    const carrier = item.carrier ?? 'unknown';
    const meta = carrierLabels[carrier] ?? { label: carrier || '未识别', tone: 'mobile' as const };
    const current = totals.get(carrier) ?? { name: meta.label, total: 0, success: 0, tone: meta.tone };
    current.total += item._count._all;
    if (item.status === 'delivered') current.success += item._count._all;
    totals.set(carrier, current);
  });
  return Array.from(totals.values());
}

function buildRegionStatsFromAggregates(stats: SmsBatchTask['messageStats']): RegionStat[] {
  const totals = new Map<string, RegionStat>();
  (stats ?? []).forEach((item) => {
    const region = item.province ?? '未识别省份';
    const current = totals.get(region) ?? { region, total: 0, success: 0 };
    current.total += item._count._all;
    if (item.status === 'delivered') current.success += item._count._all;
    totals.set(region, current);
  });
  return Array.from(totals.values()).sort((a, b) => b.total - a.total);
}

function mapTask(task: SmsBatchTask): SmsTask {
  const messages = task.messages ?? [];
  const submittedStatuses = ['submitted', 'delivered', 'failed', 'unknown', 'timeout', 'submit_failed'];
  const failedStatuses = ['failed', 'submit_failed', 'rejected', 'timeout'];
  const submittedCount = task.submittedTotal ?? countMessages(messages, submittedStatuses);
  const successCount = task.successTotal ?? countMessages(messages, ['delivered']);
  const failedCount = task.failedTotal ?? countMessages(messages, failedStatuses);
  // submittedTotal already includes unknown and timeout records, so never add them again.
  const processedCount = Math.max(submittedCount, successCount + failedCount + (task.unknownTotal ?? 0));
  const billingCount = (task.messageStats ?? []).reduce((sum, item) => sum + (item._sum.billingUnits ?? 0), 0)
    || messages.reduce((sum, message) => sum + (message.billingUnits ?? 0), 0)
    || task.phoneTotal * (task.template?.billingUnits ?? Math.max(1, Math.ceil([...task.content].length / 67)));

  return {
    id: task.taskNo || task.id,
    backendId: task.id,
    enterprise: task.tenant?.name ?? task.tenantId,
    application: task.application?.name ?? task.applicationId ?? '未绑定应用',
    submittedAt: task.createdAt,
    templateContent: task.content,
    phoneCount: task.phoneTotal,
    wordCount: [...task.content].length,
    billingCount,
    sendType: task.scheduledAt ? 'scheduled' : 'immediate',
    scheduledAt: task.scheduledAt,
    submittedCount,
    submittedSuccess: submittedCount,
    sentCount: Math.min(task.phoneTotal, processedCount),
    successCount,
    failedCount,
    status: normalizeTaskStatus(task.status),
    rawStatus: task.status,
    carriers: task.messageStats ? buildCarrierStatsFromAggregates(task.messageStats) : buildCarrierStats(messages),
    regions: task.messageStats ? buildRegionStatsFromAggregates(task.messageStats) : buildRegionStats(messages),
  };
}

function getProgress(task: SmsTask) {
  return task.phoneCount > 0 ? Math.min(100, Math.round((task.sentCount / task.phoneCount) * 100)) : 0;
}

function getSuccessRate(task: SmsTask) {
  return task.submittedCount > 0 ? (task.successCount / task.submittedCount) * 100 : 0;
}

function getRegionRate(region: RegionStat) {
  return region.total > 0 ? (region.success / region.total) * 100 : 0;
}

function splitSignature(content: string) {
  const match = content.match(/^【(.+?)】(.+)$/);
  return {
    signature: match?.[1],
    content: match?.[2] ?? content,
  };
}

function TaskDetailTitle({ task }: { task: SmsTask }) {
  return (
    <div className="admin-task-detail-title">
      <h2>任务详情</h2>
      <p>
        <span>{task.id}</span>
        <Tag tone={statusTones[task.status]}>{statusLabels[task.status]}</Tag>
      </p>
    </div>
  );
}

function MetricCard({ label, value, tone }: { label: string; value: string; tone?: 'success' | 'primary' }) {
  return (
    <div className={['admin-task-metric', tone ? `admin-task-metric--${tone}` : ''].filter(Boolean).join(' ')}>
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
}

function TaskDetailModal({ task, onClose }: { task: SmsTask; onClose: () => void }) {
  const progress = getProgress(task);
  const successRate = getSuccessRate(task);
  const perPhoneBillingUnits = Math.max(1, Math.ceil(task.wordCount / 67));

  return (
    <Modal
      footer={<Button onClick={onClose}>关闭</Button>}
      onClose={onClose}
      open
      size="xl"
      title={<TaskDetailTitle task={task} />}
    >
      <div className="admin-task-detail">
        <div className="admin-task-metrics">
          <MetricCard label="提交总数" value={formatNumber(task.submittedCount)} />
          <MetricCard label="提交成功" tone="success" value={formatNumber(task.submittedSuccess)} />
          <MetricCard label="发送成功" tone="primary" value={formatNumber(task.successCount)} />
          <MetricCard label="计费条数" tone="primary" value={formatNumber(task.billingCount)} />
          <MetricCard label="成功率" tone="primary" value={`${successRate.toFixed(2)}%`} />
        </div>

        <div className="admin-task-detail-grid">
          <section className="admin-task-card">
            <h3><Send size={18} />任务信息</h3>
            <dl className="admin-task-info-list">
              <div>
                <dt>企业/应用</dt>
                <dd><strong>{task.enterprise}</strong><span>{task.application}</span></dd>
              </div>
              <div>
                <dt>提交时间</dt>
                <dd>{formatTime(task.submittedAt)}</dd>
              </div>
              <div>
                <dt>发送方式</dt>
                <dd><Tag tone={task.sendType === 'immediate' ? 'info' : 'warning'}>{sendTypeLabels[task.sendType]}</Tag></dd>
              </div>
            </dl>
          </section>

          <section className="admin-task-card">
            <h3><TrendingUp size={18} />发送进度</h3>
            <div className="admin-task-progress-card">
              <div>
                <span>已处理 {formatNumber(task.sentCount)} / 总计 {formatNumber(task.phoneCount)}</span>
                <strong>{progress}%</strong>
              </div>
              <div className="batch-progress__track">
                <span className={`batch-progress__bar batch-progress__bar--${task.status === 'failed' ? 'terminated' : task.status}`} style={{ width: `${progress}%` }} />
              </div>
              <div className="admin-task-progress-split">
                <span>已提交<strong>{formatNumber(task.submittedSuccess)}</strong></span>
                <span>已成功<strong>{formatNumber(task.successCount)}</strong></span>
              </div>
            </div>
          </section>

          <section className="admin-task-card">
            <h3><BarChart3 size={18} />模板信息</h3>
            <div className="admin-task-template-block">
              <span>短信模板内容</span>
              <p className="admin-task-template">{task.templateContent}</p>
            </div>
            <dl className="admin-task-template-meta">
              <div><dt>字符数/计费条数</dt><dd>{task.wordCount} 字符 <b>·</b> {perPhoneBillingUnits} 条/号码</dd></div>
              <div><dt>发送号码数</dt><dd>{formatNumber(task.phoneCount)} 个</dd></div>
            </dl>
            <div className="admin-task-billing-note">
              <span>计费规则：每 67 字为 1 条短信。本次任务单号码 {perPhoneBillingUnits} 条，预计总计费 {formatNumber(task.billingCount)} 条</span>
            </div>
          </section>
        </div>

        <section className="admin-task-card admin-task-card--full">
          <h3><Smartphone size={18} />号码运营商分布</h3>
          {task.carriers.length === 0 ? (
            <div className="admin-uplink-empty-match">暂无已识别运营商记录</div>
          ) : (
            <div className="admin-carrier-grid">
              {task.carriers.map((carrier) => {
                const rate = carrier.total > 0 ? (carrier.success / carrier.total) * 100 : 0;
                return (
                  <article className={`admin-carrier-card admin-carrier-card--${carrier.tone}`} key={carrier.name}>
                    <strong>{carrier.name}</strong>
                    <p><span>总数</span><b>{formatNumber(carrier.total)}</b></p>
                    <p><span>成功</span><b>{formatNumber(carrier.success)}</b></p>
                    <div>
                      <em>{rate.toFixed(1)}%</em>
                      <span>成功率</span>
                    </div>
                  </article>
                );
              })}
            </div>
          )}
        </section>

        <section className="admin-task-card admin-task-card--full">
          <h3><MapPin size={18} />号码省份分布</h3>
          <Table
            columns={[
              { key: 'region', title: '省份', render: (record: RegionStat) => <strong>{record.region}</strong> },
              { key: 'total', title: '总数', align: 'right', render: (record: RegionStat) => formatNumber(record.total) },
              { key: 'success', title: '成功', align: 'right', render: (record: RegionStat) => <span className="admin-success-text">{formatNumber(record.success)}</span> },
              {
                key: 'rate',
                title: '成功率',
                align: 'right',
                render: (record: RegionStat) => <Tag tone={getRegionRate(record) >= 95 ? 'success' : 'info'}>{getRegionRate(record).toFixed(1)}%</Tag>,
              },
            ]}
            data={task.regions}
            emptyText="暂无已识别省份记录"
            rowKey={(record) => record.region}
          />
        </section>
      </div>
    </Modal>
  );
}

export function AdminSmsTaskProgressPage() {
  const [tasks, setTasks] = useState<SmsTask[]>([]);
  const [keyword, setKeyword] = useState('');
  const [enterprise, setEnterprise] = useState('all');
  const [application, setApplication] = useState('all');
  const [submittedDateRange, setSubmittedDateRange] = useState<DateRangeValue>({});
  const [hoveredTaskId, setHoveredTaskId] = useState<string | null>(null);
  const [page, setPage] = useState(1);
  const [selectedTask, setSelectedTask] = useState<SmsTask | null>(null);
  const [terminateTarget, setTerminateTarget] = useState<SmsTask | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  function loadTasks() {
    setLoading(true);
    adminApi.listAdminBatchTasks()
      .then((items) => {
        setTasks(items.map(mapTask));
        setError('');
      })
      .catch((reason: Error) => setError(reason.message || '短信任务进度加载失败'))
      .finally(() => setLoading(false));
  }

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

  const enterpriseOptions = useMemo(() => {
    const names = Array.from(new Set(tasks.map((item) => item.enterprise)));
    return [{ label: '全部企业', value: 'all' }, ...names.map((name) => ({ label: name, value: name }))];
  }, [tasks]);

  const applicationOptions = useMemo(() => {
    const names = Array.from(new Set(tasks.filter((item) => enterprise === 'all' || item.enterprise === enterprise).map((item) => item.application)));
    return [{ label: '全部应用', value: 'all' }, ...names.map((name) => ({ label: name, value: name }))];
  }, [enterprise, tasks]);

  const filteredTasks = useMemo(
    () => tasks.filter((item) => {
      const submittedDate = item.submittedAt.slice(0, 10);
      const matchesKeyword = !keyword || item.id.includes(keyword);
      const matchesEnterprise = enterprise === 'all' || item.enterprise === enterprise;
      const matchesApplication = application === 'all' || item.application === application;
      const matchesStartDate = !submittedDateRange.start || submittedDate >= submittedDateRange.start;
      const matchesEndDate = !submittedDateRange.end || submittedDate <= submittedDateRange.end;
      return matchesKeyword && matchesEnterprise && matchesApplication && matchesStartDate && matchesEndDate;
    }),
    [application, enterprise, keyword, submittedDateRange.end, submittedDateRange.start, tasks],
  );
  const pageSize = 10;
  const totalPages = Math.max(1, Math.ceil(filteredTasks.length / pageSize));
  const currentPage = Math.min(page, totalPages);
  const visibleTasks = filteredTasks.slice((currentPage - 1) * pageSize, currentPage * pageSize);

  useEffect(() => {
    setPage(1);
  }, [application, enterprise, keyword, submittedDateRange.end, submittedDateRange.start, tasks.length]);

  function resetFilters() {
    setKeyword('');
    setEnterprise('all');
    setApplication('all');
    setSubmittedDateRange({});
  }

  function terminateTask(taskId: string) {
    adminApi.terminateAdminBatchTask(taskId)
      .then(() => {
        setTerminateTarget(null);
        setSelectedTask(null);
        loadTasks();
      })
      .catch((reason: Error) => setError(reason.message || '任务终止失败'));
  }

  return (
    <section className="page-stack admin-sms-task-page">
      <div className="page-heading">
        <div>
          <Breadcrumb items={['发送任务', '短信任务进度']} />
          <h1>短信任务进度</h1>
        </div>
      </div>

      <div className="surface admin-task-filter">
        <Input label="任务编号" onChange={(event) => setKeyword(event.target.value)} placeholder="请输入任务编号" value={keyword} />
        <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={setSubmittedDateRange} value={submittedDateRange} />
        <div className="admin-task-filter__actions">
          <Button icon={<Search size={16} />} onClick={loadTasks}>查询</Button>
          <Button onClick={resetFilters} variant="ghost">重置</Button>
        </div>
      </div>

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

      <div className="surface admin-task-table-card">
        <div className="ui-table-wrap">
          <table className="ui-table batch-table admin-task-table">
            <thead>
              <tr>
                <th style={{ width: '170px' }}>任务编号</th>
                <th style={{ width: '180px' }}>企业/应用</th>
                <th style={{ width: '136px' }}>提交时间</th>
                <th style={{ width: '130px' }}>号码数/字符数</th>
                <th style={{ width: '150px' }}>发送方式</th>
                <th style={{ width: '190px' }}>进度</th>
                <th style={{ width: '130px' }}>状态</th>
                <th style={{ textAlign: 'right', width: '170px' }}>操作</th>
              </tr>
            </thead>
            <tbody>
              {loading ? (
                <tr><td className="ui-table__empty" colSpan={8}>正在加载真实短信任务...</td></tr>
              ) : filteredTasks.length === 0 ? (
                <tr><td className="ui-table__empty" colSpan={8}>暂无短信任务</td></tr>
              ) : visibleTasks.map((record) => {
                const progress = getProgress(record);
                const { signature, content } = splitSignature(record.templateContent);
                const rowClass = hoveredTaskId === record.id ? 'batch-row--hovered' : '';

                return (
                  <Fragment key={record.backendId}>
                    <tr
                      className={['batch-main-row', rowClass].filter(Boolean).join(' ')}
                      onMouseEnter={() => setHoveredTaskId(record.id)}
                      onMouseLeave={() => setHoveredTaskId(null)}
                    >
                      <td><strong className="admin-task-id">{record.id}</strong></td>
                      <td>
                        <div className="admin-task-enterprise">
                          <strong>{record.enterprise}</strong>
                          <span>{record.application}</span>
                        </div>
                      </td>
                      <td><span>{formatTime(record.submittedAt)}</span></td>
                      <td>
                        <div className="admin-task-counts">
                          <strong>{formatNumber(record.phoneCount)}</strong>
                          <span>{record.wordCount}字</span>
                        </div>
                      </td>
                      <td>
                        <div className="admin-task-send-type">
                          <Tag tone={record.sendType === 'immediate' ? 'info' : 'warning'}>
                            {record.sendType === 'scheduled' ? <CalendarClock size={13} /> : null}
                            {sendTypeLabels[record.sendType]}
                          </Tag>
                          {record.scheduledAt ? <span>{formatTime(record.scheduledAt)}</span> : null}
                        </div>
                      </td>
                      <td>
                        <div className="batch-progress admin-task-list-progress">
                          <div>
                            <span>{formatNumber(record.sentCount)}/{formatNumber(record.phoneCount)}</span>
                            <strong>{progress}%</strong>
                          </div>
                          <div className="batch-progress__track">
                            <span className={`batch-progress__bar batch-progress__bar--${record.status === 'failed' ? 'terminated' : record.status}`} style={{ width: `${progress}%` }} />
                          </div>
                        </div>
                      </td>
                      <td><Tag tone={statusTones[record.status]}>{statusLabels[record.status]}</Tag></td>
                      <td style={{ textAlign: 'right' }}>
                        <div className="admin-task-actions">
                          <Button icon={<Eye size={15} />} onClick={() => setSelectedTask(record)} size="sm" variant="ghost">详情</Button>
                          <Button
                            disabled={record.status !== 'sending'}
                            icon={<StopCircle size={15} />}
                            onClick={() => setTerminateTarget(record)}
                            size="sm"
                            variant="ghost"
                          >
                            终止
                          </Button>
                        </div>
                      </td>
                    </tr>
                    <tr
                      className={['batch-template-row', 'admin-task-template-row', rowClass].filter(Boolean).join(' ')}
                      onMouseEnter={() => setHoveredTaskId(record.id)}
                      onMouseLeave={() => setHoveredTaskId(null)}
                    >
                      <td colSpan={8}>
                        <InlineTextPreview label="模板内容" leading={signature ? <strong>【{signature}】</strong> : null}>
                          {content}
                        </InlineTextPreview>
                      </td>
                    </tr>
                  </Fragment>
                );
              })}
            </tbody>
          </table>
        </div>
        <Pagination
          nextDisabled={currentPage >= totalPages}
          onNext={() => setPage((value) => Math.min(totalPages, value + 1))}
          onPrevious={() => setPage((value) => Math.max(1, value - 1))}
          page={currentPage}
          totalPages={totalPages}
          onPageChange={setPage}
          previousDisabled={currentPage <= 1}
          total={filteredTasks.length}
        />
      </div>

      {selectedTask ? <TaskDetailModal onClose={() => setSelectedTask(null)} task={selectedTask} /> : null}
      {terminateTarget ? (
        <Modal
          footer={(
            <>
              <Button onClick={() => setTerminateTarget(null)} variant="ghost">取消</Button>
              <Button onClick={() => terminateTask(terminateTarget.backendId)} variant="danger">确认终止</Button>
            </>
          )}
          onClose={() => setTerminateTarget(null)}
          open
          title="确认终止短信任务"
        >
          <div className="admin-confirm-text">
            确认终止任务 <strong>{terminateTarget.id}</strong> 吗？终止后将停止继续提交未发送号码，已提交部分仍以运营商回执为准。
          </div>
        </Modal>
      ) : null}
    </section>
  );
}