'use client';

import { useState } from 'react';
import { Bar } from '@/components/ui/primitives';
import { adminFetch } from '@/lib/admin-fetch';
import { fmt } from '@/lib/format';
import { COMPONENT_LABEL } from '@/lib/pressure';
import type { AdminConfig, ComponentId } from '@/lib/types';
import { AdminPage, ErrorNote, Panel, Toast, btnCls, btnPrimary, inputCls, useAdmin } from './shared';

export function Config() {
  const { data, err, reload } = useAdmin<AdminConfig>('/config');
  // Edits are kept separately and overlay the fetched config (no effect-driven copy).
  const [edits, setEdits] = useState<AdminConfig | null>(null);
  const cfg: AdminConfig | null = edits ?? data;
  const setCfg = (c: AdminConfig) => setEdits(c);
  const [msg, setMsg] = useState<string | null>(null);
  const [saveErr, setSaveErr] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  if (!cfg) return <AdminPage title="Scoring config">{err ? <ErrorNote err={err} /> : <p className="text-[12px] text-ink-3">Loading…</p>}</AdminPage>;

  const sum = Object.values(cfg.pressure_weights).reduce((a, b) => a + Number(b || 0), 0);
  const valid = Math.abs(sum - 1) <= 0.001;
  const levelsOk = cfg.levels.every((l, i) => i === 0 || l.max > cfg.levels[i - 1]!.max) && cfg.levels.at(-1)?.max === 100;
  const dirty = JSON.stringify(cfg) !== JSON.stringify(data);

  const save = async () => {
    setBusy(true);
    setSaveErr(null);
    try {
      await adminFetch('/config', { method: 'PUT', body: cfg });
      setMsg('Configuration stored — applied on the next engine cycle.');
      setEdits(null);
      reload();
    } catch (e) {
      setSaveErr(String(e));
    } finally {
      setBusy(false);
      setTimeout(() => setMsg(null), 4000);
    }
  };

  const setEngine = (k: string, v: string) => setCfg({ ...cfg, engine: { ...cfg.engine, [k]: v === '' ? '' : Number.isNaN(Number(v)) ? v : Number(v) } });

  return (
    <AdminPage
      title={`Scoring config · v${cfg.version}`}
      desc="Weights, levels and engine parameters (pressure.yaml). Stored in Postgres and hot-reloaded by the engine. Weights must sum to 1 ± 0.001."
      right={
        <div className="flex gap-2">
          <button type="button" className={btnCls} disabled={!dirty} onClick={() => setEdits(null)}>
            reset
          </button>
          <button type="button" className={btnPrimary} disabled={!valid || !levelsOk || !dirty || busy} onClick={() => void save()}>
            PUT config
          </button>
        </div>
      }
    >
      <ErrorNote err={err ?? saveErr} />
      <Toast msg={msg} />
      <div className="grid grid-cols-[minmax(0,1fr)] gap-3 lg:grid-cols-3">
        <Panel title="Component weights" right={<span className="num" style={{ color: valid ? 'var(--ok)' : 'var(--bad)' }}>Σ {fmt(sum, 3)} {valid ? '✓' : '≠ 1.000'}</span>}>
          <ul className="space-y-2">
            {Object.entries(cfg.pressure_weights).map(([id, w]) => (
              <li key={id} className="grid grid-cols-[110px_72px_minmax(0,1fr)] items-center gap-3 text-[12.5px]">
                <span className="text-ink">{COMPONENT_LABEL[id as ComponentId] ?? id}</span>
                <input type="number" step="0.01" min={0} max={1} value={w} onChange={(e) => setCfg({ ...cfg, pressure_weights: { ...cfg.pressure_weights, [id]: Number(e.target.value) } })} className={`${inputCls} num w-full`} aria-label={`${id} weight`} />
                <Bar value={Number(w) * 100} max={40} color="var(--accent)" />
              </li>
            ))}
          </ul>
        </Panel>
        <Panel title="Levels" right={<span style={{ color: levelsOk ? 'var(--ok)' : 'var(--bad)' }}>{levelsOk ? 'monotonic, ends at 100' : 'must increase and end at 100'}</span>}>
          <ul className="space-y-2">
            {cfg.levels.map((l, i) => (
              <li key={l.id} className="grid grid-cols-[80px_72px_minmax(0,1fr)] items-center gap-3 text-[12.5px]">
                <span className="text-ink" style={{ color: `var(--p-${l.id})` }}>
                  {l.id}
                </span>
                <input type="number" min={0} max={100} value={l.max} onChange={(e) => setCfg({ ...cfg, levels: cfg.levels.map((x, j) => (j === i ? { ...x, max: Number(e.target.value) } : x)) })} className={`${inputCls} num w-full`} aria-label={`${l.id} max`} />
                <input value={l.label} onChange={(e) => setCfg({ ...cfg, levels: cfg.levels.map((x, j) => (j === i ? { ...x, label: e.target.value } : x)) })} className={`${inputCls} w-full`} aria-label={`${l.id} label`} />
              </li>
            ))}
          </ul>
        </Panel>
        <Panel title="Engine parameters">
          <ul className="space-y-2">
            {Object.entries(cfg.engine).map(([k, v]) => (
              <li key={k} className="grid grid-cols-[minmax(0,1fr)_110px] items-center gap-3 text-[12px]">
                <span className="num truncate text-ink-2" title={k}>
                  {k}
                </span>
                <input value={String(v)} onChange={(e) => setEngine(k, e.target.value)} className={`${inputCls} num w-full`} aria-label={k} />
              </li>
            ))}
          </ul>
        </Panel>
      </div>
      <details className="mt-3">
        <summary className="cursor-pointer text-[12px] text-ink-2">Full JSON (events, fronts, scheduler, component signal recipes)</summary>
        <pre className="num mt-2 max-h-[420px] overflow-auto rounded-[4px] border border-line bg-panel p-3 text-[11px] text-ink-2">{JSON.stringify(cfg, null, 2)}</pre>
      </details>
    </AdminPage>
  );
}