'use client';

import { useState } from 'react';
import { SeriesChart } from '@/components/charts/SeriesChart';
import { adminFetch } from '@/lib/admin-fetch';
import { fmt } from '@/lib/format';
import { COMPONENT_LABEL, COMPONENT_ORDER } from '@/lib/pressure';
import type { AdminConfig, AdminReplay } from '@/lib/types';
import { AdminPage, ErrorNote, Field, Panel, btnPrimary, inputCls, useAdmin } from './shared';

export function Replay() {
  const { data: cfg } = useAdmin<AdminConfig>('/config');
  const [from, setFrom] = useState(() => new Date(Date.now() - 86400_000).toISOString().slice(0, 16));
  const [to, setTo] = useState(() => new Date().toISOString().slice(0, 16));
  const [weights, setWeights] = useState<Record<string, number> | null>(null);
  const [res, setRes] = useState<AdminReplay | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const w = weights ?? cfg?.pressure_weights ?? Object.fromEntries(COMPONENT_ORDER.map((c) => [c, 0]));
  const sum = Object.values(w).reduce((a, b) => a + Number(b || 0), 0);
  const valid = Math.abs(sum - 1) <= 0.001;

  const run = async () => {
    setBusy(true);
    setErr(null);
    try {
      setRes(await adminFetch<AdminReplay>('/replay', { method: 'POST', body: { from: new Date(from + 'Z').toISOString(), to: new Date(to + 'Z').toISOString(), weights: w } }));
    } catch (e) {
      setErr(String(e));
    } finally {
      setBusy(false);
    }
  };

  const diffs = res ? res.points.map((p) => p.pressure_replayed - p.pressure_original) : [];
  const maxDiff = diffs.length ? Math.max(...diffs.map(Math.abs)) : 0;

  return (
    <AdminPage title="Replay" desc="Recompute the index over a past window with alternative weights, from stored signal features. Validates scoring changes against real incidents before applying them.">
      <div className="grid grid-cols-[minmax(0,1fr)] gap-3 lg:grid-cols-[320px_minmax(0,1fr)]">
        <Panel title="Window & weights" right={<span className="num" style={{ color: valid ? 'var(--ok)' : 'var(--bad)' }}>Σ {fmt(sum, 3)}</span>}>
          <div className="grid grid-cols-2 gap-3">
            <Field label="from (UTC)">
              <input type="datetime-local" value={from} onChange={(e) => setFrom(e.target.value)} className={`${inputCls} num w-full`} />
            </Field>
            <Field label="to (UTC)">
              <input type="datetime-local" value={to} onChange={(e) => setTo(e.target.value)} className={`${inputCls} num w-full`} />
            </Field>
          </div>
          <ul className="mt-3 space-y-2">
            {Object.entries(w).map(([id, v]) => (
              <li key={id} className="grid grid-cols-[minmax(0,1fr)_80px] items-center gap-3 text-[12.5px]">
                <span className="text-ink">{COMPONENT_LABEL[id as keyof typeof COMPONENT_LABEL] ?? id}</span>
                <input type="number" step="0.01" min={0} max={1} value={v} onChange={(e) => setWeights({ ...w, [id]: Number(e.target.value) })} className={`${inputCls} num w-full`} aria-label={`${id} weight`} />
              </li>
            ))}
          </ul>
          <button type="button" className={`${btnPrimary} mt-3 w-full`} disabled={!valid || busy} onClick={() => void run()}>
            {busy ? 'replaying…' : 'Replay'}
          </button>
          <ErrorNote err={err} />
        </Panel>
        <Panel title="Original vs replayed" right={res ? <span className="num">step {res.step_seconds} s · max |Δ| {fmt(maxDiff)}</span> : undefined}>
          {res ? (
            <SeriesChart
              lines={[
                { name: 'original', color: '#8B98A5', points: res.points.map((p) => ({ ts: p.ts, value: p.pressure_original })), area: true },
                { name: 'replayed', color: '#5B8DEF', points: res.points.map((p) => ({ ts: p.ts, value: p.pressure_replayed })), width: 1.5 },
              ]}
              height={340}
            />
          ) : (
            <p className="py-10 text-center text-[12px] text-ink-3">Choose a window and weights, then replay.</p>
          )}
        </Panel>
      </div>
    </AdminPage>
  );
}