'use client';

import { useState } from 'react';
import { PNum } from '@/components/ui/primitives';
import { adminFetch } from '@/lib/admin-fetch';
import { fmtInt, fmtPct } from '@/lib/format';
import type { AdminTarget } from '@/lib/types';
import { AdminPage, ErrorNote, Field, Panel, Toast, btnCls, btnPrimary, inputCls, useAdmin } from './shared';

const EMPTY: Partial<AdminTarget> = { target_id: '', name: '', hostname: '', category: 'cloud', provider: '', service_id: '', country: 'US', region: 'na-east', importance: 3, tier: 2 };
const CATEGORIES = ['dns', 'cdn', 'cloud', 'search', 'messaging', 'social', 'finance', 'government', 'news', 'developer', 'ai', 'streaming', 'commerce', 'infrastructure'];

export function Targets() {
  const { data, err, reload } = useAdmin<{ targets: AdminTarget[] }>('/targets');
  const [q, setQ] = useState('');
  const [editing, setEditing] = useState<Partial<AdminTarget> | null>(null);
  const [isNew, setIsNew] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [actErr, setActErr] = useState<string | null>(null);

  const rows = (data?.targets ?? []).filter((t) => !q || t.hostname.includes(q) || t.name.toLowerCase().includes(q.toLowerCase()) || t.target_id.includes(q));

  const run = async (fn: () => Promise<unknown>, ok: string) => {
    setBusy(true);
    setActErr(null);
    try {
      await fn();
      setMsg(ok);
      setEditing(null);
      reload();
    } catch (e) {
      setActErr(String(e));
    } finally {
      setBusy(false);
      setTimeout(() => setMsg(null), 3000);
    }
  };

  return (
    <AdminPage
      title="Targets"
      desc="Registry of measured endpoints. Frequencies come from tiers (scheduler); importance weights the aggregates. Changes apply on the next config refresh (≤ 5 min on probes)."
      right={
        <div className="flex gap-2">
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="filter…" className={inputCls} aria-label="Filter" />
          <button
            type="button"
            className={btnPrimary}
            onClick={() => {
              setEditing({ ...EMPTY });
              setIsNew(true);
            }}
          >
            + target
          </button>
        </div>
      }
    >
      <ErrorNote err={err ?? actErr} />
      <Toast msg={msg} />
      {editing && (
        <Panel title={isNew ? 'Create target' : `Edit ${editing.target_id}`} className="mb-3">
          <form
            className="grid grid-cols-2 gap-3 md:grid-cols-5"
            onSubmit={(e) => {
              e.preventDefault();
              const body = { ...editing, importance: Number(editing.importance), tier: Number(editing.tier) };
              void run(() => (isNew ? adminFetch('/targets', { method: 'POST', body }) : adminFetch(`/targets/${encodeURIComponent(editing.target_id!)}`, { method: 'PATCH', body })), isNew ? 'Target created' : 'Target updated');
            }}
          >
            <Field label="target_id">
              <input required disabled={!isNew} value={editing.target_id ?? ''} onChange={(e) => setEditing({ ...editing, target_id: e.target.value })} className={`${inputCls} num w-full`} />
            </Field>
            <Field label="name">
              <input required value={editing.name ?? ''} onChange={(e) => setEditing({ ...editing, name: e.target.value })} className={`${inputCls} w-full`} />
            </Field>
            <Field label="hostname">
              <input required value={editing.hostname ?? ''} onChange={(e) => setEditing({ ...editing, hostname: e.target.value })} className={`${inputCls} num w-full`} />
            </Field>
            <Field label="category">
              <select value={editing.category ?? ''} onChange={(e) => setEditing({ ...editing, category: e.target.value })} className={`${inputCls} w-full`}>
                {CATEGORIES.map((c) => (
                  <option key={c}>{c}</option>
                ))}
              </select>
            </Field>
            <Field label="provider">
              <input value={editing.provider ?? ''} onChange={(e) => setEditing({ ...editing, provider: e.target.value })} className={`${inputCls} w-full`} />
            </Field>
            <Field label="service_id">
              <input value={editing.service_id ?? ''} onChange={(e) => setEditing({ ...editing, service_id: e.target.value })} className={`${inputCls} num w-full`} />
            </Field>
            <Field label="country">
              <input value={editing.country ?? ''} maxLength={2} onChange={(e) => setEditing({ ...editing, country: e.target.value.toUpperCase() })} className={`${inputCls} num w-full`} />
            </Field>
            <Field label="region">
              <input value={editing.region ?? ''} onChange={(e) => setEditing({ ...editing, region: e.target.value })} className={`${inputCls} num w-full`} />
            </Field>
            <Field label="importance 1–5">
              <input type="number" min={1} max={5} value={editing.importance ?? 3} onChange={(e) => setEditing({ ...editing, importance: Number(e.target.value) })} className={`${inputCls} num w-full`} />
            </Field>
            <Field label="tier 1–3">
              <input type="number" min={1} max={3} value={editing.tier ?? 2} onChange={(e) => setEditing({ ...editing, tier: Number(e.target.value) })} className={`${inputCls} num w-full`} />
            </Field>
            <div className="col-span-2 flex gap-2 md:col-span-5">
              <button type="submit" className={btnPrimary} disabled={busy}>
                {isNew ? 'Create' : 'Save'}
              </button>
              <button type="button" className={btnCls} onClick={() => setEditing(null)}>
                Cancel
              </button>
            </div>
          </form>
        </Panel>
      )}
      <div className="scroll-x">
        <table className="tbl">
          <thead>
            <tr>
              <th>Target</th>
              <th>Hostname</th>
              <th>Category</th>
              <th>Anchor</th>
              <th className="r">Imp.</th>
              <th className="r">Tier</th>
              <th className="r">Pressure</th>
              <th className="r">OK 1h</th>
              <th>Enabled</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {rows.map((t) => (
              <tr key={t.target_id} className={t.enabled === false ? 'opacity-50' : ''}>
                <td>
                  <span className="text-ink">{t.name}</span> <span className="num text-[10.5px] text-ink-3">{t.target_id}</span>
                </td>
                <td className="num text-ink-2">{t.hostname}</td>
                <td className="text-ink-2">{t.category}</td>
                <td className="num text-ink-2">
                  {t.country} · {t.region}
                </td>
                <td className="num r">{t.importance}</td>
                <td className="num r">{t.tier}</td>
                <td className="r">
                  <PNum value={t.pressure} />
                </td>
                <td className="num r">{fmtPct(t.ok_ratio_1h, 1)}</td>
                <td>
                  <button type="button" className="text-[11px] uppercase tracking-[0.1em]" style={{ color: t.enabled === false ? 'var(--ink-3)' : 'var(--ok)' }} onClick={() => void run(() => adminFetch(`/targets/${encodeURIComponent(t.target_id)}`, { method: 'PATCH', body: { enabled: t.enabled === false } }), t.enabled === false ? 'Enabled' : 'Disabled')}>
                    {t.enabled === false ? 'disabled' : 'enabled'}
                  </button>
                </td>
                <td className="r">
                  <div className="flex justify-end gap-1">
                    <button
                      type="button"
                      className="text-[11px] text-ink-2 hover:text-ink"
                      onClick={() => {
                        setEditing({ ...t });
                        setIsNew(false);
                      }}
                    >
                      edit
                    </button>
                    <button
                      type="button"
                      className="text-[11px] text-bad/80 hover:text-bad"
                      onClick={() => {
                        if (confirm(`Delete target ${t.target_id}? History is kept; the target stops being measured.`)) void run(() => adminFetch(`/targets/${encodeURIComponent(t.target_id)}`, { method: 'DELETE' }), 'Target deleted');
                      }}
                    >
                      delete
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p className="num mt-2 text-[11px] text-ink-3">{fmtInt(rows.length)} targets</p>
    </AdminPage>
  );
}