'use client';

import { useEffect, useMemo, useState } from 'react';
import { fmt } from '@/lib/format';
import { COMPONENT_LABEL, COMPONENT_ORDER } from '@/lib/pressure';
import { useTime } from '@/lib/time';
import type { ComponentId, History, HistoryRange } from '@/lib/types';
import { AXIS_STYLE, TOOLTIP_STYLE, levelMarkArea, type EChartsOption, type LineSeriesOption } from './echarts';
import { useEChart } from './useEChart';

const COMP_COLORS: Record<ComponentId, string> = {
  routing: '#5B8DEF',
  latency: '#E9C46A',
  dns: '#4CC9F0',
  availability: '#E76F51',
  http_tls: '#F4A261',
  path: '#B497F0',
  corroboration: '#8B98A5',
};
const RANGES: HistoryRange[] = ['1h', '6h', '24h', '7d', '30d'];

/**
 * Pressure history: area of the scope pressure with level bands, optional component lines, range switcher.
 * `initial` is the SSR 24h response; other ranges are fetched client-side (server-side aggregation, spec §51).
 */
export function HistoryChart({ initial, scopeType = 'global', scopeId = null, height = 280, showComponents = true, title }: { initial: History | null; scopeType?: string; scopeId?: string | null; height?: number; showComponents?: boolean; title?: string }) {
  const [range, setRange] = useState<HistoryRange>(initial?.range ?? '24h');
  const [fetched, setFetched] = useState<History | null>(null);
  const [comps, setComps] = useState<Set<ComponentId>>(new Set());
  const { mode, format } = useTime();
  const useInitial = Boolean(initial && range === initial.range);
  const data = useInitial ? initial : fetched && fetched.range === range ? fetched : null;
  const loading = !useInitial && data === null;

  useEffect(() => {
    if (useInitial) return;
    const ctrl = new AbortController();
    const qs = new URLSearchParams({ scope_type: scopeType, range });
    if (scopeId) qs.set('scope_id', scopeId);
    fetch(`/api/v1/pressure/history?${qs}`, { signal: ctrl.signal })
      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(String(r.status)))))
      .then((d: History) => setFetched(d))
      .catch(() => {});
    return () => ctrl.abort();
  }, [range, scopeType, scopeId, useInitial]);

  const option = useMemo<EChartsOption | null>(() => {
    if (!data) return null;
    const ts = data.points.map((p) => new Date(p.ts).getTime());
    const series: LineSeriesOption[] = [
      {
        name: 'Pressure',
        type: 'line',
        data: ts.map((t, i) => [t, data.points[i]!.pressure]),
        showSymbol: false,
        smooth: false,
        lineStyle: { width: 1.5, color: '#E6EDF3' },
        areaStyle: { color: 'rgba(230,237,243,0.06)' },
        markArea: levelMarkArea(0.06),
        z: 3,
      },
    ];
    for (const c of comps) {
      series.push({ name: COMPONENT_LABEL[c], type: 'line', data: ts.map((t, i) => [t, data.points[i]!.components?.[c] ?? null]), showSymbol: false, lineStyle: { width: 1, color: COMP_COLORS[c] }, connectNulls: false, z: 2 });
    }
    return {
      animation: false,
      grid: { left: 36, right: 12, top: 12, bottom: 28 },
      tooltip: {
        trigger: 'axis',
        ...TOOLTIP_STYLE,
        axisPointer: { lineStyle: { color: '#243040' } },
        formatter: (params: unknown) => {
          const arr = params as { seriesName: string; value: [number, number | null]; color: string }[];
          if (!arr.length) return '';
          const t = arr[0]!.value[0];
          return `<div style="color:#8B98A5;margin-bottom:4px">${format(t, 'short')}</div>` + arr.map((p) => `<div><span style="display:inline-block;width:8px;height:8px;background:${p.color};margin-right:6px"></span>${p.seriesName} <b style="float:right;margin-left:12px">${p.value[1] == null ? '—' : fmt(p.value[1])}</b></div>`).join('');
        },
      },
      xAxis: { type: 'time', ...AXIS_STYLE, splitLine: { show: false }, axisLabel: { ...AXIS_STYLE.axisLabel, formatter: (v: number) => format(v, range === '1h' || range === '6h' ? 'time' : range === '24h' ? 'short' : 'date').replace(' UTC', '') } },
      yAxis: { type: 'value', min: 0, max: 100, interval: 25, ...AXIS_STYLE },
      series,
    };
    // `mode` is a dependency because the axis formatter closes over the UTC/local preference.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data, comps, range, mode]);

  const { ref } = useEChart(option);

  return (
    <div>
      <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
        <div className="flex flex-wrap items-center gap-3">
          {title && <span className="text-[13px] text-ink">{title}</span>}
          <div role="radiogroup" aria-label="Range" className="inline-flex overflow-hidden rounded-[4px] border border-line text-[10.5px]">
            {RANGES.map((r) => (
              <button key={r} type="button" role="radio" aria-checked={range === r} onClick={() => setRange(r)} className={`num px-2 py-1 ${range === r ? 'bg-panel-2 text-ink' : 'text-ink-3 hover:text-ink-2'}`}>
                {r}
              </button>
            ))}
          </div>
          {loading && <span className="text-[10.5px] text-ink-3">loading…</span>}
        </div>
        {showComponents && (
          <div className="flex flex-wrap gap-1" role="group" aria-label="Component lines">
            {COMPONENT_ORDER.filter((c) => c !== 'corroboration').map((c) => {
              const on = comps.has(c);
              return (
                <button
                  key={c}
                  type="button"
                  aria-pressed={on}
                  onClick={() =>
                    setComps((s) => {
                      const n = new Set(s);
                      if (n.has(c)) n.delete(c);
                      else n.add(c);
                      return n;
                    })
                  }
                  className={`inline-flex items-center gap-1.5 rounded-[3px] border px-1.5 py-0.5 text-[10.5px] ${on ? 'border-line-2 text-ink' : 'border-line text-ink-3 hover:text-ink-2'}`}
                >
                  <span className="size-1.5 rounded-full" style={{ background: COMP_COLORS[c], opacity: on ? 1 : 0.4 }} aria-hidden="true" />
                  {COMPONENT_LABEL[c]}
                </button>
              );
            })}
          </div>
        )}
      </div>
      <div ref={ref} style={{ height }} className="w-full" role="img" aria-label={`Pressure history, ${range}`} />
      {data && (
        <p className="num mt-1 flex flex-wrap gap-x-4 text-[10.5px] text-ink-3">
          <span>min {fmt(data.summary.min)}</span>
          <span>avg {fmt(data.summary.avg)}</span>
          <span>
            max {fmt(data.summary.max)} at {format(data.summary.max_ts, 'short')}
          </span>
          <span>step {data.step_seconds >= 3600 ? `${data.step_seconds / 3600} h` : data.step_seconds >= 60 ? `${data.step_seconds / 60} min` : `${data.step_seconds} s`}</span>
        </p>
      )}
    </div>
  );
}