import { ChevronLeft } from 'lucide-react'
import { useMemo } from 'react'
import { IP_VERSIONS, lineIdFor } from '@shared/ipVersions'
import { Link, useParams, useSearchParams } from 'react-router-dom'
import { api } from '@shared/api/client'
import type { LineDto, TestDto } from '@shared/api/types'
import { TimeChart, type ChartSeries } from '@shared/charts/TimeChart'
import { fmtAgo, fmtMbps, fmtMs, fmtNum, fmtPct, fmtTime } from '@shared/format'
import { NodeTag, useNodeInfos } from '@shared/nodes'
import { fmtBytes, useHosts } from '../live'
import { useQuery } from '@shared/hooks'
import { Chip, Dot, LoadingBar, Segmented, Spinner, Stat } from '@shared/ui'
import { PageError, ScoreChips } from '../lib'
import { Minimap } from '../Minimap'
import { readSpec, usePeriod, usePeriodSeries, writeSpec } from '../periods'
import { dayBounds, dayKey, RangePicker, WINDOWS, type WindowValue } from '../ranges'

const MIN = 60_000

function tone(value: number | null | undefined, good: number, poor: number): 'ok' | 'warn' | 'bad' | '' {
  if (value === null || value === undefined) return ''
  if (value <= good) return 'ok'
  if (value >= poor) return 'bad'
  return 'warn'
}

interface HostSeries {
  t: number[]
  values: Record<string, (number | null)[]>
}

/** 指标卡片：好坏的分界（越低越好）和显示格式。 */
const TILES: { label: string; key: string; fmt: (v: number | null | undefined) => string; good?: number; poor?: number; unit?: string; /** 这个线路没有数据时不显示（建连任务不是每条线路都开着）。 */ optional?: boolean }[] = [
  { label: 'UDP 延迟 p50', key: 'rtt.p50', fmt: fmtMs },
  { label: 'UDP 延迟 p95', key: 'rtt.p95', fmt: fmtMs },
  { label: 'UDP 丢包', key: 'loss.total', fmt: fmtPct, good: 0.5, poor: 3 },
  { label: 'UDP 上行丢包', key: 'loss.up', fmt: fmtPct, good: 0.5, poor: 3 },
  { label: 'UDP 下行丢包', key: 'loss.down', fmt: fmtPct, good: 0.5, poor: 3 },
  { label: 'UDP 最长连续丢包', key: 'loss.run_max', fmt: fmtNum, unit: '包' },
  { label: 'UDP 上行抖动 p95', key: 'jitter.up.p95', fmt: fmtMs },
  { label: 'UDP 下行抖动 p95', key: 'jitter.down.p95', fmt: fmtMs },
  { label: 'TCP RTT p50', key: 'tcp.rtt.p50', fmt: fmtMs },
  { label: 'TCP RTT p99', key: 'tcp.rtt.p99', fmt: fmtMs },
  { label: 'TCP RTT 最大', key: 'tcp.rtt.max', fmt: fmtMs },
  { label: 'TCP 重传率', key: 'tcp.retrans', fmt: fmtPct, good: 0.5, poor: 3 },
  { label: 'TCP 建连 p95', key: 'connect.tcp_ms.p95', fmt: fmtMs, optional: true },
  { label: 'TLS 握手 p95', key: 'connect.tls_ms.p95', fmt: fmtMs, optional: true },
  { label: '建连成功率', key: 'connect.success', fmt: fmtPct, optional: true },
]

interface ChartDef {
  id: string
  title: string
  unit: string
  zero?: boolean
  fill?: boolean
  series: { key: string; label: string; color: string; dash?: number[] }[]
  group: 'udp' | 'tcp' | 'connect' | 'score'
  /** 占满一行。 */
  wide?: boolean
}

const GROUPS = [
  { id: 'udp', title: 'UDP（往返探测）' },
  { id: 'tcp', title: 'TCP' },
  { id: 'connect', title: '建连（TCP 握手、TLS 握手）' },
  { id: 'score', title: '评分' },
] as const

const CHARTS: ChartDef[] = [
  { id: 'rtt', title: '延迟', group: 'udp', wide: true, unit: 'ms', series: [{ key: 'rtt.p50', label: 'p50', color: '--chart-1' }, { key: 'rtt.p95', label: 'p95', color: '--chart-2' }, { key: 'rtt.p99', label: 'p99', color: '--chart-3' }] },
  { id: 'loss', title: '丢包', group: 'udp', unit: '%', series: [{ key: 'loss.up', label: '上行', color: '--chart-2' }, { key: 'loss.down', label: '下行', color: '--chart-3' }, { key: 'loss.total', label: '合计', color: '--chart-1', dash: [4, 3] }] },
  { id: 'jitter', title: '抖动（p95）', group: 'udp', unit: 'ms', series: [{ key: 'jitter.up.p95', label: '上行', color: '--chart-2' }, { key: 'jitter.down.p95', label: '下行', color: '--chart-1' }] },
  { id: 'tcp', title: '往返时延（RTT）', group: 'tcp', unit: 'ms', series: [{ key: 'tcp.rtt.p50', label: 'p50', color: '--chart-1' }, { key: 'tcp.rtt.p95', label: 'p95', color: '--chart-2' }, { key: 'tcp.rtt.max', label: '最大', color: '--chart-3' }] },
  { id: 'retrans', title: '重传率', group: 'tcp', unit: '%', fill: true, series: [{ key: 'tcp.retrans', label: '重传率', color: '--chart-3' }] },
  { id: 'connect-time', title: '建连耗时（p95）', group: 'connect', unit: 'ms', series: [{ key: 'connect.tcp_ms.p95', label: 'TCP 建连', color: '--chart-1' }, { key: 'connect.tls_ms.p95', label: 'TLS 握手', color: '--chart-2' }] },
  { id: 'connect-ok', title: '建连成功率', group: 'connect', unit: '%', zero: false, series: [{ key: 'connect.success', label: '成功率', color: '--chart-3' }] },
  { id: 'score', title: '综合评分', group: 'score', wide: true, unit: '', series: [{ key: 'score.reality', label: 'REALITY', color: '--chart-1' }, { key: 'score.hy2', label: 'Hy2', color: '--chart-2' }, { key: 'score.mc', label: 'MC', color: '--chart-4' }, { key: 'score.base', label: '综合', color: '--chart-5', dash: [4, 3] }] },
]

/** EWMA 平滑的力度：系数越小越平滑（s = α·x + (1−α)·s）。 */
const EWMA = [
  { value: 'off', label: '关', alpha: 0 },
  { value: 'low', label: '轻', alpha: 0.3 },
  { value: 'mid', label: '中', alpha: 0.1 },
  { value: 'high', label: '重', alpha: 0.03 },
] as const
type EwmaValue = (typeof EWMA)[number]['value']

/** 指数加权移动平均；缺口（没有数据）处断开，缺口后重新开始，不会把缺口两边连在一起。 */
function ewma(values: (number | null)[], alpha: number): (number | null)[] {
  let state: number | null = null
  return values.map((v) => {
    if (v === null || v === undefined) {
      state = null
      return null
    }
    state = state === null ? v : alpha * v + (1 - alpha) * state
    return state
  })
}

/** 主机状态：实时数据（SSE）每隔几秒来一次，只重绘这一块，不影响上面的图表。 */
function HostCard({ agentId, range }: { agentId: string | undefined; range: string | null }) {
  const history = useQuery(
    () => (agentId && range ? api.get<HostSeries>(`/api/public/agents/${agentId}/host`, { range }) : Promise.resolve(undefined)),
    [agentId, range],
    30_000,
  )
  const { hosts } = useHosts()
  const host = agentId ? hosts.get(agentId)?.host : undefined
  const data = history.data
  const charts = useMemo(
    () =>
      data
        ? {
            usage: [
              { label: 'CPU', values: data.values['cpu'] ?? [], color: '--chart-1' },
              { label: '内存', values: data.values['mem'] ?? [], color: '--chart-2' },
              { label: '磁盘', values: data.values['disk'] ?? [], color: '--chart-4' },
            ],
            speed: [
              { label: '上行', values: data.values['tx_bps'] ?? [], color: '--chart-2' },
              { label: '下行', values: data.values['rx_bps'] ?? [], color: '--chart-1' },
            ],
          }
        : undefined,
    [data],
  )
  if (!host && !data) return null
  return (
    <div className="card">
      <div className="card-title">主机状态</div>
      {host ? (
        <div className="grid stats">
          <Stat label="CPU" value={host.cpu_percent === null ? '—' : host.cpu_percent.toFixed(0)} unit="%" />
          <Stat label="内存" value={host.mem_total ? ((100 * (host.mem_used ?? 0)) / host.mem_total).toFixed(0) : '—'} unit="%" />
          <Stat label="磁盘" value={host.disk_total ? ((100 * (host.disk_used ?? 0)) / host.disk_total).toFixed(0) : '—'} unit="%" />
          <Stat label="累计流量 ↑ / ↓" value={`${fmtBytes(host.net_tx_total)} / ${fmtBytes(host.net_rx_total)}`} />
        </div>
      ) : null}
      {data && charts ? (
        <div className="grid cols-2" style={{ marginTop: 16 }}>
          <TimeChart t={data.t} unit="%" series={charts.usage} />
          <TimeChart t={data.t} unit=" B/s" series={charts.speed} />
        </div>
      ) : null}
    </div>
  )
}

export function Line() {
  const { id = '' } = useParams()
  const [params, setParams] = useSearchParams()

  const line = useQuery(() => api.get<LineDto>(`/api/public/lines/${encodeURIComponent(id)}`), [id], 15_000)
  const infos = useNodeInfos()
  const ready = Boolean(line.data)
  const sinceMs = line.data?.data_since ? Date.parse(line.data.data_since) : null
  const nowMs = useMemo(() => Date.now(), [line.data])
  const todayStart = dayBounds(nowMs).start

  const spec = readSpec(params)
  const period = usePeriod(id, ready, sinceMs, nowMs, spec)
  const series = usePeriodSeries(id, ready, period)

  const update = (fn: (q: URLSearchParams) => void) => {
    const q = new URLSearchParams(params)
    fn(q)
    setParams(q, { replace: true })
  }
  const dayParam = (dayStart: number) => (dayStart === todayStart ? null : dayKey(dayStart))
  const changeDay = (next: { dayStart: number; window: WindowValue | null }) =>
    update((q) => writeSpec(q, { ...readSpec(q), day: dayParam(next.dayStart), range: next.window, at: null }))
  const selectRange = (fromMs: number, toMs: number) =>
    update((q) => {
      const a = Math.round((fromMs - period.dayStart) / MIN)
      const b = Math.round((toMs - period.dayStart) / MIN)
      writeSpec(q, { ...readSpec(q), day: dayParam(period.dayStart), range: null, at: `${a}_${b}` })
    })
  /** 点了一档时长。看的是最新的（今天、选区到现在）就继续看「最近一段」；否则保持选区的起点，往后取这么长。 */
  const pickLength = (w: WindowValue) =>
    update((q) => {
      const base = { ...readSpec(q), day: dayParam(period.dayStart) }
      const info = WINDOWS.find((x) => x.value === w)!
      if (w === 'day' || (period.isToday && (period.live || period.toMs >= nowMs - 2 * MIN))) {
        writeSpec(q, { ...base, range: w, at: null })
        return
      }
      const start = Math.min(period.fromMs, nowMs - info.ms)
      const a = Math.round((start - period.dayStart) / MIN)
      writeSpec(q, { ...base, range: null, at: `${a}_${a + info.ms / MIN}` })
    })
  const setScale = (scale: 24 | 48) =>
    update((q) => {
      const current = readSpec(q)
      // 换回 24 小时：跨零点的选区放不下了，回到默认
      writeSpec(q, { ...current, span: scale === 24 ? '24' : null, at: scale === 24 && period.domainMin > 1440 ? null : current.at })
    })

  const agentId = line.data?.agent_id
  const lastTestId = line.data?.last_test?.id
  const test = useQuery(() => (lastTestId ? api.get<TestDto>(`/api/public/tests/${lastTestId}`) : Promise.resolve(undefined)), [lastTestId])

  const smooth = EWMA.find((x) => x.value === params.get('ewma')) ?? EWMA[0]
  const s = series.data
  const m = s?.summary.metrics ?? {}
  const gaps = useMemo(() => (s?.gaps ?? []).map((g) => ({ from: Date.parse(g.from), to: Date.parse(g.to) })), [s])

  // 图表只在数据变化时更新；别的状态（加载中、实时推送）变化不会让它们闪
  const charts = useMemo(
    () =>
      s
        ? GROUPS.map((group) => {
            const cards = CHARTS.filter((def) => def.group === group.id).map((def) => {
              const raw = def.series.map((x) => ({ x, values: s.values[x.key] ?? [] }))
              // 开了 EWMA：原始数据画成淡线垫在后面，平滑后的线画在上面
              const list: ChartSeries[] =
                smooth.alpha > 0
                  ? [
                      ...raw.map(({ x, values }) => ({ label: `${x.label}（原始）`, values, color: x.color, faint: true })),
                      ...raw.map(({ x, values }) => ({ label: x.label, values: ewma(values, smooth.alpha), color: x.color, dash: x.dash, fill: def.fill })),
                    ]
                  : raw.map(({ x, values }) => ({ label: x.label, values, color: x.color, dash: x.dash, fill: def.fill }))
              if (!list.some((x) => x.values.some((v) => v !== null))) return null
              return { def, node: <TimeChart t={s.t} series={list} unit={def.unit} gaps={gaps} zero={def.zero !== false} height={def.wide ? 260 : 220} /> }
            })
            return { group, cards: cards.filter((c): c is NonNullable<typeof c> => c !== null) }
          }).filter((g) => g.cards.length > 0)
        : [],
    [s, gaps, smooth.alpha],
  )
  const loadingNow = !ready || series.busy
  const chartSections = charts.map(({ group, cards }) => (
    <section className="chart-section" key={group.id}>
      <h2>{group.title}</h2>
      <div className="grid cols-2">
        {cards.map(({ def, node }) => (
          <div className={`card chart-card has-loading ${def.wide ? 'wide' : ''}`} key={def.id}>
            <LoadingBar active={loadingNow} />
            <h3>{def.title}</h3>
            {node}
          </div>
        ))}
      </div>
    </section>
  ))

  const result = test.data?.result
  const peak = result?.metrics?.['tcp.bulk.peak.max']

  return (
    <main className="page">
      <div className="crumbs">
        <Link to={id.endsWith('~ipv6') ? '/?ip_version=ipv6' : '/'} className="row">
          <ChevronLeft size={16} />
          总览
        </Link>
      </div>

      <section className="hero">
        <h1>
          {line.data?.name ?? '线路'}
          {line.data ? <span className="muted" style={{ fontWeight: 400 }}> → {line.data.probe_name}</span> : null}
        </h1>
        <div className="row" style={{ marginTop: 12 }}>
          {IP_VERSIONS.map((v) => {
            const query = new URLSearchParams(params)
            query.set('ip_version', v.value)
            return (
              <Link key={v.value} className={`btn small${(id.endsWith('~ipv6') ? 'ipv6' : 'ipv4') === v.value ? ' primary' : ''}`} to={`/line/${encodeURIComponent(lineIdFor(id, v.value))}?${query.toString()}`}>
                {v.label}
              </Link>
            )
          })}
          {line.data && !line.data.ipv6_available && id.endsWith('~ipv6') ? <span className="muted">此 Agent 未配置 IPv6 地址</span> : null}
        </div>
        {line.data ? (
          <div className="row wrap" style={{ marginTop: 12 }}>
            <Dot tone={line.data.online && line.data.probe_connected ? 'ok' : line.data.online ? 'warn' : 'bad'} />
            <span className="muted">{line.data.online ? (line.data.probe_connected ? '在线' : 'Agent 在线，测量通道未建立（Probe 没能和它建立测量会话；机器可能是通的，ping 通不代表测量用的 TCP 和 UDP 通道可用）') : 'Agent 离线'}</span>
            <span className="row" style={{ gap: 6 }}>
              <span className="faint">Agent</span>
              <NodeTag info={infos.get(line.data.agent_id)} />
            </span>
            <span className="row" style={{ gap: 6 }}>
              <span className="faint">Probe</span>
              <NodeTag info={infos.get(line.data.probe_id)} />
            </span>
            {line.data.labels.map((x) => (
              <Chip key={x}>{x}</Chip>
            ))}
            {series.loading && !s ? <Spinner /> : null}
          </div>
        ) : null}
        <div style={{ marginTop: 16 }}>
          <RangePicker
            dayStart={period.dayStart}
            fromMs={period.fromMs}
            toMs={period.toMs}
            onChange={changeDay}
            onWindow={pickLength}
            scale={period.domainMin > 1440 ? 48 : 24}
            onScale={setScale}
            sinceMs={sinceMs}
            nowMs={nowMs}
            spanMs={period.spanMs}
          >
            <Minimap
              domainStart={period.domainStart}
              domainMin={period.domainMin}
              t={period.overview.t}
              values={period.overview.loss}
              fromMs={period.fromMs}
              toMs={period.toMs}
              loading={!ready || period.busy}
              onSelect={selectRange}
            />
          </RangePicker>
        </div>
      </section>

      <PageError error={line.error ?? series.error} />

      {!s && (loadingNow || !line.error) && !series.error ? (
        // 还没有数据：先摆出占位，每块上面有进度条
        <div className="stack" style={{ marginTop: 24 }}>
          <div className="tiles">
            {Array.from({ length: 12 }, (_, i) => (
              <div className="skeleton has-loading" key={i}>
                <LoadingBar active />
              </div>
            ))}
          </div>
          <div className="skeleton chart has-loading">
            <LoadingBar active />
          </div>
          <div className="grid cols-2">
            {[0, 1].map((i) => (
              <div className="skeleton chart has-loading" key={i}>
                <LoadingBar active />
              </div>
            ))}
          </div>
        </div>
      ) : null}

      {s ? (
        <div className="stack" style={{ marginTop: 24 }}>
          <div className="tiles">
            <div className="tile scores-tile has-loading">
              <LoadingBar active={loadingNow} />
              <span className="k">评分</span>
              <ScoreChips metrics={m} />
            </div>
            {TILES.filter((t) => !t.optional || m[t.key] != null).map((t) => (
              <Stat key={t.key} label={t.label} value={t.fmt(m[t.key])} unit={t.unit} tone={t.good !== undefined ? tone(m[t.key], t.good, t.poor ?? Infinity) : ''} />
            ))}
          </div>
          <p className="faint">
            样本数：UDP {fmtNum(s.summary.samples['udp_echo'])} · TCP {fmtNum(s.summary.samples['tcp_echo'])}
          </p>
          {s.summary.coverage < 0.95 ? <p className="faint">这个时间段的数据覆盖率是 {(s.summary.coverage * 100).toFixed(0)}%，阴影部分是没有数据的时段。</p> : null}

          <div className="row" style={{ justifyContent: 'flex-end', gap: 8 }}>
            <span className="faint" title="指数加权移动平均：把线条磨平，看清趋势；原始数据以淡线垫在后面">
              EWMA 平滑
            </span>
            <Segmented<EwmaValue>
              options={EWMA.map((x) => ({ value: x.value, label: x.label }))}
              value={smooth.value}
              onChange={(v) => update((q) => (v === 'off' ? q.delete('ewma') : q.set('ewma', v)))}
            />
          </div>
          {chartSections}

          <HostCard agentId={agentId} range={period.hostRange} />

          {test.data && result ? (
            <div className="card">
              <div className="card-title">最近一次测试 · {test.data.plan}</div>
              <div className="grid stats">
                {peak !== undefined ? <Stat label="吞吐峰值" value={fmtMbps(peak)} /> : null}
                {result.metrics['connect.success'] !== undefined ? <Stat label="建连成功率" value={fmtPct(result.metrics['connect.success'], 1)} /> : null}
                {result.metrics['connect.tls_ms.p95'] !== undefined ? <Stat label="TLS 握手 p95" value={fmtMs(result.metrics['connect.tls_ms.p95'])} /> : null}
                {result.metrics['hy2.sustainable_mbps'] !== undefined ? <Stat label="Hy2 可持续码率" value={fmtMbps(result.metrics['hy2.sustainable_mbps'])} /> : null}
                {result.metrics['hy2.qos_onset_mbps'] !== undefined ? <Stat label="限速起点" value={fmtMbps(result.metrics['hy2.qos_onset_mbps'])} /> : null}
              </div>
              <p className="faint" style={{ marginTop: 12 }}>
                {fmtTime(test.data.finished_at)}（{fmtAgo(test.data.finished_at)}）
              </p>
            </div>
          ) : null}

          {s.events.length > 0 ? (
            <div className="card">
              <div className="card-title">事件</div>
              <div className="event-list">
                {s.events.slice(0, 20).map((e) => (
                  <div key={e.id}>
                    <span className="faint num" style={{ minWidth: 120 }}>
                      {fmtTime(e.at)}
                    </span>
                    <span>{e.kind}</span>
                    {e.detail ? <span className="muted mono">{e.detail}</span> : null}
                  </div>
                ))}
              </div>
            </div>
          ) : null}
        </div>
      ) : null}
    </main>
  )
}