'use client';

import { useState } from 'react';
import { adminFetch } from '@/lib/admin-fetch';
import { Time } from '@/lib/time';
import type { AdminAnnotation } from '@/lib/types';
import { AdminPage, ErrorNote, Field, Panel, Toast, btnPrimary, inputCls, useAdmin } from './shared';

export function Annotations() {
  const { data, err, reload } = useAdmin<{ annotations: AdminAnnotation[] }>('/annotations');
  const [form, setForm] = useState(() => ({ ts: new Date().toISOString().slice(0, 19) + 'Z', scope_type: 'global', scope_id: '', text: '' }));
  const [msg, setMsg] = useState<string | null>(null);
  const [actErr, setActErr] = useState<string | null>(null);
  return (
    <AdminPage title="Annotations" desc="Human context attached to a moment and a scope (maintenance windows, confirmed causes, external news). Shown on incident pages and charts.">
      <Panel title="New annotation" className="mb-3">
        <form
          className="grid grid-cols-2 gap-3 md:grid-cols-[180px_130px_160px_minmax(0,1fr)_auto]"
          onSubmit={(e) => {
            e.preventDefault();
            setActErr(null);
            adminFetch('/annotations', { method: 'POST', body: { ...form, scope_id: form.scope_id || null } })
              .then(() => {
                setMsg('Annotation saved');
                setForm({ ...form, text: '' });
                reload();
              })
              .catch((er: unknown) => setActErr(String(er)))
              .finally(() => setTimeout(() => setMsg(null), 3000));
          }}
        >
          <Field label="ts (UTC ISO)">
            <input value={form.ts} onChange={(e) => setForm({ ...form, ts: e.target.value })} className={`${inputCls} num w-full`} required />
          </Field>
          <Field label="scope_type">
            <select value={form.scope_type} onChange={(e) => setForm({ ...form, scope_type: e.target.value })} className={`${inputCls} w-full`}>
              {['global', 'region', 'country', 'asn', 'service', 'incident'].map((s) => (
                <option key={s}>{s}</option>
              ))}
            </select>
          </Field>
          <Field label="scope_id">
            <input value={form.scope_id} onChange={(e) => setForm({ ...form, scope_id: e.target.value })} className={`${inputCls} num w-full`} />
          </Field>
          <Field label="text">
            <input value={form.text} onChange={(e) => setForm({ ...form, text: e.target.value })} className={`${inputCls} w-full`} required />
          </Field>
          <div className="flex items-end">
            <button type="submit" className={btnPrimary}>
              Add
            </button>
          </div>
        </form>
      </Panel>
      <ErrorNote err={err ?? actErr} />
      <Toast msg={msg} />
      <ul className="divide-y divide-line">
        {(data?.annotations ?? []).map((a, i) => (
          <li key={a.id ?? i} className="py-2 text-[13px]">
            <p className="text-ink">{a.text}</p>
            <p className="num mt-0.5 text-[11px] text-ink-3">
              <Time ts={a.ts} /> · {a.scope_type}
              {a.scope_id ? `:${a.scope_id}` : ''} · {a.author ?? 'admin'}
            </p>
          </li>
        ))}
      </ul>
    </AdminPage>
  );
}