import { Star } from 'lucide-react'
import { useMemo } from 'react'
import { useSearchParams } from 'react-router-dom'
import { api } from '@shared/api/client'
import type { CompareDto, OverviewDto, OverviewLineDto } from '@shared/api/types'
import { TimeChart, type ChartSeries } from '@shared/charts/TimeChart'
import { fmtMs, fmtPct } from '@shared/format'
import { useQuery } from '@shared/hooks'
import { Chip, Empty, Segmented, Spinner } from '@shared/ui'
import { lineLabel, PageError } from '../lib'
import { PRESETS, type PresetValue } from '../ranges'

interface MetricInfo {
  id: string
  label: string
  unit: 'ms' | '%' | ''
  better: 'lower' | 'higher'
}

const METRICS: MetricInfo[] = [
  { id: 'rtt.p50', label: '延迟 p50', unit: 'ms', better: 'lower' },
  { id: 'rtt.p95', label: '延迟 p95', unit: 'ms', better: 'lower' },
  { id: 'loss.total', label: '丢包', unit: '%', better: 'lower' },
  { id: 'loss.up', label: '上行丢包', unit: '%', better: 'lower' },
  { id: 'loss.down', label: '下行丢包', unit: '%', better: 'lower' },
  { id: 'jitter.up.p95', label: '上行抖动', unit: 'ms', better: 'lower' },
  { id: 'jitter.down.p95', label: '下行抖动', unit: 'ms', better: 'lower' },
  { id: 'tcp.rtt.p50', label: 'TCP RTT p50', unit: 'ms', better: 'lower' },
  { id: 'tcp.retrans', label: 'TCP 重传', unit: '%', better: 'lower' },
  { id: 'score.reality', label: 'REALITY 评分', unit: '', better: 'higher' },
  { id: 'score.hy2', label: 'Hy2 评分', unit: '', better: 'higher' },
  { id: 'score.mc', label: 'MC 评分', unit: '', better: 'higher' },
  { id: 'score.base', label: '综合评分', unit: '', better: 'higher' },
]

const COLORS = ['--chart-1', '--chart-2', '--chart-3', '--chart-4', '--chart-5', '--chart-6']
const MAX_LINES = 6

const isPreset = (v: string | null): v is PresetValue => PRESETS.some((p) => p.value === v)

function fmt(m: MetricInfo, v: number | null | undefined): string {
  if (v === null || v === undefined) return '—'
  return m.unit === 'ms' ? fmtMs(v) : m.unit === '%' ? fmtPct(v) : v.toFixed(0)
}

interface Cell {
  line: OverviewLineDto
  value: number | null
  /** 在这一列（同一个 Probe）里的名次，从 1 开始；没有数据是 null。 */
  rank: number | null
  /** 比这一列最好的差多少（百分比）；最好的是 0。 */
  gap: number | null
}

export function Compare() {
  const [params, setParams] = useSearchParams()
  const range: PresetValue = isPreset(params.get('range')) ? (params.get('range') as PresetValue) : '1d'
  const metric = METRICS.find((m) => m.id === params.get('metric')) ?? METRICS[0]
  const picked = useMemo(() => (params.get('lines') ?? '').split(',').filter(Boolean), [params])

  const overview = useQuery(() => api.get<OverviewDto>('/api/public/overview', { range, metrics: metric.id }), [range, metric.id], 15_000)

  // 矩阵：行是 Agent，列是 Probe；每一列内部排名（同一个 Probe 看出去，哪个 Agent 的线路好）
  const matrix = useMemo(() => {
    const lines = overview.data?.lines ?? []
    const probes = [...new Map(lines.map((l) => [l.probe_id, l.probe_name])).entries()].sort((a, b) => a[1].localeCompare(b[1]))
    const agents = [...new Map(lines.map((l) => [l.agent_id, l.name])).entries()].sort((a, b) => a[1].localeCompare(b[1]))
    const byProbe = new Map<string, Cell[]>()
    for (const [probeId] of probes) {
      const cells: Cell[] = lines
        .filter((l) => l.probe_id === probeId)
        .map((line) => ({ line, value: line.summary.metrics[metric.id] ?? null, rank: null, gap: null }))
      const ranked = cells.filter((c) => c.value !== null).sort((a, b) => (metric.better === 'lower' ? a.value! - b.value! : b.value! - a.value!))
      const best = ranked[0]?.value ?? null
      ranked.forEach((c, i) => {
        c.rank = i + 1
        c.gap = best === null || best === 0 ? (c.value === best ? 0 : null) : (Math.abs(c.value! - best) / Math.abs(best)) * 100
      })
      byProbe.set(probeId, cells)
    }
    return { probes, agents, byProbe }
  }, [overview.data, metric])

  // 默认选每个 Probe 里最好的那条线路（最多 6 条）
  const defaults = useMemo(() => {
    const ids: string[] = []
    for (const [probeId] of matrix.probes) {
      const best = matrix.byProbe.get(probeId)?.find((c) => c.rank === 1)
      if (best) ids.push(best.line.id)
    }
    return ids.slice(0, MAX_LINES)
  }, [matrix])
  const selected = picked.length > 0 ? picked : defaults

  const compare = useQuery(
    () => (selected.length ? api.get<CompareDto>('/api/public/compare', { lines: selected.join(','), metric: metric.id, range }) : Promise.resolve(undefined)),
    [selected.join(','), metric.id, range],
    15_000,
  )

  const update = (patch: Record<string, string | null>) => {
    const next = new URLSearchParams(params)
    for (const [k, v] of Object.entries(patch)) {
      if (v) next.set(k, v)
      else next.delete(k)
    }
    setParams(next, { replace: true })
  }
  const toggle = (id: string) => {
    const next = selected.includes(id) ? selected.filter((x) => x !== id) : [...selected, id].slice(-MAX_LINES)
    update({ lines: next.join(',') })
  }

  const names = new Map((overview.data?.lines ?? []).map((l) => [l.id, lineLabel(l.name, l.probe_name)]))
  const series: ChartSeries[] = selected.map((id, i) => ({ label: names.get(id) ?? id, values: compare.data?.values[id] ?? [], color: COLORS[i % COLORS.length] }))

  // 每个 Probe 的最佳线路
  const winners = matrix.probes.map(([probeId, probeName]) => ({ probeName, cell: matrix.byProbe.get(probeId)?.find((c) => c.rank === 1) }))

  return (
    <main className="page">
      <section className="hero">
        <h1>线路对比</h1>
        <p className="sub">同一个指标，在每个 Probe 看出去，哪个 Agent 的线路更好。</p>
        <div className="toolbar">
          <Segmented options={PRESETS.map((p) => ({ value: p.value, label: p.label }))} value={range} onChange={(v) => update({ range: v })} />
          <select className="select" style={{ width: 'auto' }} value={metric.id} onChange={(e) => update({ metric: e.target.value })}>
            {METRICS.map((x) => (
              <option key={x.id} value={x.id}>
                {x.label}
              </option>
            ))}
          </select>
          <span className="muted">{metric.better === 'lower' ? '越低越好' : '越高越好'}</span>
          <span className="right">{overview.loading && !overview.data ? <Spinner /> : null}</span>
        </div>
      </section>

      <PageError error={overview.error ?? compare.error} />

      {overview.data ? (
        matrix.agents.length === 0 ? (
          <div className="card" style={{ marginTop: 24 }}>
            <Empty>还没有线路</Empty>
          </div>
        ) : (
          <>
            {winners.some((w) => w.cell) ? (
              <div className="winners">
                {winners.map((w) =>
                  w.cell ? (
                    <div key={w.probeName} className="card winner">
                      <span className="faint">从 {w.probeName} 看出去最好</span>
                      <span className="winner-name">
                        <Star size={16} /> {w.cell.line.name}
                      </span>
                      <span className="num muted">{fmt(metric, w.cell.value)}</span>
                    </div>
                  ) : null,
                )}
              </div>
            ) : null}

            <div className="card" style={{ marginTop: 16, padding: '8px 12px' }}>
              <table className="table matrix">
                <thead>
                  <tr>
                    <th>Agent / Probe</th>
                    {matrix.probes.map(([id, name]) => (
                      <th key={id} className="r">
                        {name}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {matrix.agents.map(([agentId, agentName]) => (
                    <tr key={agentId}>
                      <td style={{ fontWeight: 600 }}>{agentName}</td>
                      {matrix.probes.map(([probeId]) => {
                        const cell = matrix.byProbe.get(probeId)?.find((c) => c.line.agent_id === agentId)
                        if (!cell) return <td key={probeId} className="r faint">—</td>
                        const on = selected.includes(cell.line.id)
                        const tone = cell.rank === 1 ? 'ok' : cell.gap !== null && cell.gap > 50 ? 'bad' : cell.gap !== null && cell.gap > 15 ? 'warn' : ''
                        return (
                          <td key={probeId} className="r">
                            <button type="button" className={`cell ${on ? 'on' : ''}`} onClick={() => toggle(cell.line.id)} title={on ? '从图里移除' : '加到下面的图里'}>
                              {cell.rank === 1 ? <Star size={13} /> : null}
                              <Chip tone={tone}>{fmt(metric, cell.value)}</Chip>
                              {cell.rank !== null && cell.rank > 1 && cell.gap !== null ? <small className="faint">+{cell.gap.toFixed(0)}%</small> : null}
                            </button>
                          </td>
                        )
                      })}
                    </tr>
                  ))}
                </tbody>
              </table>
              <p className="faint" style={{ padding: '4px 12px 8px' }}>
                ★ 是这一列（同一个 Probe）里最好的；点格子把线路加到下面的图里，最多 {MAX_LINES} 条。
              </p>
            </div>

            <div className="card" style={{ marginTop: 16 }}>
              <div className="card-title">{metric.label} 的走势</div>
              {compare.data ? <TimeChart t={compare.data.t} series={series} unit={metric.unit === '' ? '' : metric.unit} /> : <Empty>{selected.length ? '加载中…' : '点上面的格子选择线路'}</Empty>}
            </div>
          </>
        )
      ) : null}
    </main>
  )
}