'use client';

import Link from 'next/link';
import { useState } from 'react';
import { PNum, StatusDot } from '@/components/ui/primitives';
import { adminFetch } from '@/lib/admin-fetch';
import { fmtDuration } from '@/lib/format';
import { Time } from '@/lib/time';
import type { AdminIncident } from '@/lib/types';
import { AdminPage, ErrorNote, Toast, btnCls, inputCls, useAdmin } from './shared';

export function IncidentsReview() {
  const [status, setStatus] = useState('all');
  const { data, err, reload } = useAdmin<{ incidents: AdminIncident[] }>('/incidents', { status });
  const [notes, setNotes] = useState<Record<string, string>>({});
  const [msg, setMsg] = useState<string | null>(null);
  const [actErr, setActErr] = useState<string | null>(null);

  const review = async (i: AdminIncident, verdict: 'confirmed' | 'dismissed' | 'unreviewed') => {
    setActErr(null);
    try {
      await adminFetch(`/incidents/${encodeURIComponent(i.event_id)}`, { method: 'PATCH', body: { review: verdict, note: notes[i.event_id] ?? i.note ?? '' } });
      setMsg(`${i.title}: ${verdict}`);
      reload();
    } catch (e) {
      setActErr(String(e));
    } finally {
      setTimeout(() => setMsg(null), 3000);
    }
  };

  return (
    <AdminPage
      title="Incidents review"
      desc="Confirm or dismiss detected incidents and leave a note. Reviews feed the replay/validation dataset; they never alter the public record of what the engine detected."
      right={
        <select value={status} onChange={(e) => setStatus(e.target.value)} className={inputCls} aria-label="Status filter">
          {['all', 'active', 'resolved'].map((s) => (
            <option key={s}>{s}</option>
          ))}
        </select>
      }
    >
      <ErrorNote err={err ?? actErr} />
      <Toast msg={msg} />
      <ul className="divide-y divide-line">
        {(data?.incidents ?? []).map((i) => (
          <li key={i.event_id} className="grid gap-3 py-3 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
            <div className="min-w-0">
              <div className="flex flex-wrap items-baseline gap-x-3">
                <PNum value={i.peak_pressure} className="text-[18px]" />
                <Link href={`/event/${i.slug}`} className="text-[13.5px] text-ink hover:text-accent">
                  {i.title}
                </Link>
                <StatusDot status={i.status} />
                <span className="label" style={{ color: i.review === 'confirmed' ? 'var(--ok)' : i.review === 'dismissed' ? 'var(--bad)' : 'var(--ink-3)' }}>
                  {i.review ?? 'unreviewed'}
                </span>
              </div>
              <p className="num mt-0.5 text-[11px] text-ink-3">
                {i.type} · {i.scope_label} · <Time ts={i.started_at} /> · {fmtDuration(i.duration_s)} · conf {Math.round(i.confidence * 100)} %
              </p>
              <p className="mt-1 text-[12px] text-ink-2">{i.summary}</p>
            </div>
            <textarea value={notes[i.event_id] ?? i.note ?? ''} onChange={(e) => setNotes({ ...notes, [i.event_id]: e.target.value })} placeholder="review note…" rows={2} className={`${inputCls} h-auto w-full py-1.5`} aria-label={`Note for ${i.title}`} />
            <div className="flex gap-2 lg:flex-col">
              <button type="button" className={`${btnCls} border-ok/60 text-ok`} onClick={() => void review(i, 'confirmed')}>
                confirm
              </button>
              <button type="button" className={`${btnCls} border-bad/60 text-bad`} onClick={() => void review(i, 'dismissed')}>
                dismiss
              </button>
              <button type="button" className={btnCls} onClick={() => void review(i, 'unreviewed')}>
                save note
              </button>
            </div>
          </li>
        ))}
      </ul>
    </AdminPage>
  );
}