'use client';

import { useState } from 'react';
import { SeriesChart } from '@/components/charts/SeriesChart';
import { fmt, fmtInt } from '@/lib/format';
import type { AdminBaselines } from '@/lib/types';
import { AdminPage, ErrorNote, Field, Panel, inputCls, useAdmin } from './shared';

const SIGNALS = ['ttfb_z', 'tcp_z', 'rtt_z', 'loss', 'dns_fail_rate', 'dns_latency_z', 'resolver_disagreement', 'target_down_corroborated', 'fail_rate_z', 'http_5xx_rate', 'tls_fail_rate', 'reset_timeout_rate', 'route_change_rate', 'hop_count_z', 'path_latency_shift', 'bgp_withdrawals_z', 'bgp_announcements_z', 'bgp_origin_changes_z', 'bgp_collector_disagreement', 'vendor_incidents'];

export function Baselines() {
  const [signal, setSignal] = useState('ttfb_z');
  const [scopeType, setScopeType] = useState('global');
  const [scopeId, setScopeId] = useState('');
  const { data, err, loading } = useAdmin<AdminBaselines>('/baselines', { signal_id: signal, scope_type: scopeType, scope_id: scopeId || undefined });
  const pts = data?.points ?? [];
  return (
    <AdminPage title="Baseline diagnostics" desc="Value vs rolling median ± MAD for one signal and scope. If the median drifts with the value, the baseline window is too short or the exclusion too small.">
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        <Field label="signal_id">
          <select value={signal} onChange={(e) => setSignal(e.target.value)} className={`${inputCls} num w-full`}>
            {SIGNALS.map((s) => (
              <option key={s}>{s}</option>
            ))}
          </select>
        </Field>
        <Field label="scope_type">
          <select value={scopeType} onChange={(e) => setScopeType(e.target.value)} className={`${inputCls} w-full`}>
            {['global', 'region', 'country', 'asn', 'service', 'probe', 'target'].map((s) => (
              <option key={s}>{s}</option>
            ))}
          </select>
        </Field>
        <Field label="scope_id">
          <input value={scopeId} onChange={(e) => setScopeId(e.target.value)} placeholder="na-east · CA · 13335 · …" className={`${inputCls} num w-full`} />
        </Field>
        <div className="num flex items-end text-[11px] text-ink-3">{data ? `${fmtInt(data.samples)} samples · ${data.baseline_days} d baseline` : loading ? 'loading…' : ''}</div>
      </div>
      <ErrorNote err={err} />
      {pts.length > 0 && (
        <Panel className="mt-3">
          <SeriesChart
            lines={[
              { name: 'value', color: '#E6EDF3', points: pts.map((p) => ({ ts: p.ts, value: p.value })), width: 1.25 },
              { name: 'median', color: '#5B8DEF', points: pts.map((p) => ({ ts: p.ts, value: p.median })), dashed: true },
              { name: 'median + MAD', color: '#8B98A5', points: pts.map((p) => ({ ts: p.ts, value: p.median + p.mad })), dashed: true, width: 0.8 },
              { name: 'median − MAD', color: '#8B98A5', points: pts.map((p) => ({ ts: p.ts, value: p.median - p.mad })), dashed: true, width: 0.8 },
              { name: 'robust z', color: '#E76F51', points: pts.map((p) => ({ ts: p.ts, value: p.z })), yAxisIndex: 1 },
            ]}
            yMax="auto"
            bands={false}
            height={300}
            y2={{ max: 'auto', name: 'z' }}
          />
          <p className="num mt-2 text-[11px] text-ink-3">
            latest: value {fmt(pts.at(-1)!.value)} · median {fmt(pts.at(-1)!.median)} · MAD {fmt(pts.at(-1)!.mad, 2)} · z {fmt(pts.at(-1)!.z)}
          </p>
        </Panel>
      )}
    </AdminPage>
  );
}