import { useCallback, useEffect, useRef, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Breadcrumb, Button, Input, Select, Table, Tabs, Tag, type TableColumn } from '@/components/ui';
import { MonitorRuntimeOverview } from './MonitorRuntimeOverview';
import { MonitorRulesModal, MonitorScopePicker, MonitorTargetsModal } from './sending-monitor/MonitorConfiguration';
import { MonitorAlerts, MonitorHistory, MonitorPager, Rate } from './sending-monitor/MonitorDetails';
import {
  monitorApi,
  names,
  ruleSource,
  states,
  time,
  title,
  type MonitorType,
  type Snapshot,
} from './sending-monitor/monitorApi';
import './AdminMonitorPage.css';

export function AdminMonitorPage() {
  const [params, setParams] = useSearchParams();
  const tab = params.get('tab') ?? 'industry';
  const type: MonitorType = tab === 'overall' || tab === 'verification' ? tab : 'industry';
  const [data, setData] = useState<Awaited<ReturnType<typeof monitorApi.rows>> | null>(null);
  const [summary, setSummary] = useState<Awaited<ReturnType<typeof monitorApi.overview>> | null>(null);
  const [error, setError] = useState(''),
    [loading, setLoading] = useState(false),
    [dialog, setDialog] = useState<'rules' | 'targets' | null>(null),
    [detail, setDetail] = useState<Snapshot | null>(null);
  const lastLoad = useRef(0),
    busy = useRef(false);
  const page = Math.max(1, Number(params.get('page')) || 1),
    queryKey = params.toString();
  const update = (values: Record<string, string>) => {
    const next = new URLSearchParams(params);
    Object.entries(values).forEach(([key, value]) => (value ? next.set(key, value) : next.delete(key)));
    setParams(next);
  };
  const load = useCallback(
    async (force = false, signal?: AbortSignal) => {
      if (
        tab === 'alerts' ||
        tab === 'runtime' ||
        document.hidden ||
        (busy.current && !force) ||
        (!force && Date.now() - lastLoad.current < 1500)
      )
        return;
      busy.current = true;
      lastLoad.current = Date.now();
      setLoading(true);
      const q = new URLSearchParams(queryKey);
      try {
        const [rows, overview] = await Promise.all([
          monitorApi.rows(
            {
              type,
              page: q.get('page') ?? '1',
              status: q.get('status') ?? '',
              keyword: q.get('keyword') ?? '',
              tenantId: q.get('tenantId') ?? '',
              applicationId: q.get('applicationId') ?? '',
              signatureId: q.get('signatureId') ?? '',
            },
            signal,
          ),
          monitorApi.overview(type),
        ]);
        if (!signal?.aborted) {
          setData(rows);
          setSummary(overview);
          setError('');
        }
      } catch (e) {
        if (!signal?.aborted) setError(e instanceof Error ? e.message : '监控加载失败');
      } finally {
        if (!signal?.aborted) {
          setLoading(false);
          busy.current = false;
        }
      }
    },
    [queryKey, tab, type],
  );
  useEffect(() => {
    const controller = new AbortController();
    void load(true, controller.signal);
    const refresh = () => void load(false, controller.signal);
    const timer = setInterval(refresh, 30000);
    window.addEventListener('focus', refresh);
    document.addEventListener('visibilitychange', refresh);
    return () => {
      controller.abort();
      clearInterval(timer);
      window.removeEventListener('focus', refresh);
      document.removeEventListener('visibilitychange', refresh);
    };
  }, [load]);
  const health = data?.health?.data;
  const stale = !health || !health.complete || Date.now() - new Date(health.checkedAt).getTime() > 30000;
  const rows = data?.items ?? [];
  const columns: TableColumn<Snapshot>[] = [
    {
      key: 'name',
      title: type === 'industry' ? '通道 / 运营商' : '企业 / 应用 / 签名',
      width: '260px',
      render: (row) => (
        <div className="ui-table__long-text">
          <strong>{title(row.dimensions)}</strong>
          <p>{row.dimensions.channelId ?? row.dimensions.signatureId}</p>
        </div>
      ),
    },
    { key: 'total', title: '窗口提交量', width: '110px', render: (row) => row.metrics.total.toLocaleString() },
    ...(type === 'overall' ? [60, 300, 1200] : [5, 20, 60]).map((seconds, i): TableColumn<Snapshot> => ({
      key: `rate${seconds}`,
      title: `${seconds < 60 ? `${seconds}秒` : `${seconds / 60}分钟`}到达率`,
      width: '165px',
      render: (row) => <Rate value={row.metrics.metrics[i]} />,
    })),
    {
      key: 'state',
      title: '状态 / 规则',
      width: '140px',
      render: (row) => (
        <>
          <Tag tone={!stale && row.status === 'abnormal' ? 'danger' : 'neutral'}>
            {stale ? '数据延迟' : states[row.status]}
          </Tag>
          <p>
            {ruleSource(row.rule)}
            {row.rule ? ` v${row.rule.version}` : ''}
          </p>
        </>
      ),
    },
    {
      key: 'detail',
      title: '操作',
      width: '110px',
      render: (row) => (
        <Button variant="ghost" size="sm" onClick={() => setDetail(row)}>
          趋势 / 详情
        </Button>
      ),
    },
  ];
  const counts = summary?.rows ?? [];
  const cards = [
    ['监控维度', counts.reduce((n, r) => n + r.dimensions, 0)],
    ['异常维度', counts.filter((r) => r.status === 'abnormal').reduce((n, r) => n + r.dimensions, 0)],
    [
      '样本不足',
      counts
        .filter((r) => ['sample_insufficient', 'unassessable'].includes(r.status))
        .reduce((n, r) => n + r.dimensions, 0),
    ],
    ['窗口提交量', counts.reduce((n, r) => n + Number(r.total), 0)],
  ];
  const content = (
    <div className="page-stack">
      <div className="sending-monitor__summary">
        {cards.map(([label, value]) => (
          <div className="surface" key={label}>
            <span>{label}</span>
            <strong>{data ? Number(value).toLocaleString() : '—'}</strong>
            <small>{type === 'industry' ? '按通道发送尝试' : '按唯一业务短信'}</small>
          </div>
        ))}
      </div>
      <div className="surface sending-monitor__filters">
        <div>
          <strong>评估时刻：{time(counts[0]?.evaluationAt)}</strong>
          <p>
            每{type === 'overall' ? '10' : '5'}分钟评估，提交窗口最近{type === 'overall' ? '30' : '5'}分钟
          </p>
          <small>
            采集检查：{time(health?.checkedAt)}
            {stale ? ' · 数据延迟或等待首次计算，暂停告警判断' : ' · 已完成采集'}
          </small>
        </div>
        <Input
          aria-label="搜索监控对象"
          placeholder="搜索通道、企业、应用或签名"
          value={params.get('keyword') ?? ''}
          onChange={(e) => update({ keyword: e.target.value, page: '1' })}
        />
        <Select
          label="状态"
          value={params.get('status') ?? ''}
          options={[
            { value: '', label: '全部' },
            ...['abnormal', 'normal', 'sample_insufficient', 'stale', 'unassessable', 'unconfigured', 'no_data'].map(
              (value) => ({ value, label: states[value] }),
            ),
          ]}
          onChange={(e) => update({ status: e.target.value, page: '1' })}
        />
      </div>
      {type !== 'industry' && (
        <details className="surface">
          <summary>按企业、应用、签名筛选</summary>
          <MonitorScopePicker
            scope={{
              tenantId: params.get('tenantId') ?? undefined,
              applicationId: params.get('applicationId') ?? undefined,
              signatureId: params.get('signatureId') ?? undefined,
            }}
            onChange={(scope) =>
              update({
                tenantId: scope.tenantId ?? '',
                applicationId: scope.applicationId ?? '',
                signatureId: scope.signatureId ?? '',
                page: '1',
              })
            }
          />
        </details>
      )}
      {loading && <p role="status">正在读取监控快照…</p>}
      {error && (
        <p role="alert" className="form-error">
          {error}，保留上次结果，请重试。
        </p>
      )}
      <div className="surface sending-monitor__desktop">
        <Table columns={columns} data={rows} rowKey="id" />
      </div>
      <div className="sending-monitor__mobile">
        {rows.map((row) => (
          <article className="surface" key={row.id}>
            <h3>{title(row.dimensions)}</h3>
            <Tag tone="neutral">{stale ? '数据延迟' : states[row.status]}</Tag>
            <p>
              窗口提交 {row.metrics.total} · {ruleSource(row.rule)}
            </p>
            {row.metrics.metrics.map((m) => (
              <div className="sending-monitor__mobile-metric" key={m.seconds}>
                <span>{m.seconds}秒到达率</span>
                <Rate value={m} />
              </div>
            ))}
            <Button variant="ghost" onClick={() => setDetail(row)}>
              趋势 / 详情
            </Button>
          </article>
        ))}
      </div>
      {!loading && !rows.length && !error && (
        <p className="surface">
          暂无监控快照。行业通道需先加入监控；无流量不会生成应用签名维度。历史记录缺少发包时间时不制造到达率。
        </p>
      )}
      <MonitorPager page={page} total={data?.total ?? 0} onChange={(p) => update({ page: String(p) })} />
    </div>
  );
  return (
    <section className="sending-monitor page-stack">
      <div className="page-heading">
        <Breadcrumb items={['运营概览', '发送监控']} />
        <div className="sending-monitor__actions">
          <Button variant="secondary" disabled={loading} onClick={() => void load()}>
            刷新
          </Button>
          {!['alerts', 'runtime'].includes(tab) && (
            <Button variant="secondary" onClick={() => setDialog('rules')}>
              阈值设置
            </Button>
          )}
          {tab === 'industry' && <Button onClick={() => setDialog('targets')}>监控通道</Button>}
        </div>
      </div>
      <p className="sending-monitor__notice">
        以平台收到完整成功回执为准；未满观察时长的短信不参与该时效评估。各指标分别展示成功数 / 成熟分母。
      </p>
      <Tabs
        value={tab}
        onChange={(value) => {
          setData(null);
          setSummary(null);
          setParams({ tab: value });
        }}
        items={[
          ...Object.entries(names).map(([value, label]) => ({ value, label, content })),
          { value: 'alerts', label: '告警记录', content: <MonitorAlerts /> },
          { value: 'runtime', label: '运行概况', content: <MonitorRuntimeOverview /> },
        ]}
      />
      {dialog === 'rules' && (
        <MonitorRulesModal
          type={type}
          onClose={() => {
            setDialog(null);
            void load(true);
          }}
        />
      )}
      {dialog === 'targets' && (
        <MonitorTargetsModal
          onClose={() => {
            setDialog(null);
            void load(true);
          }}
        />
      )}
      {detail && <MonitorHistory row={detail} onClose={() => setDetail(null)} />}
    </section>
  );
}