'use client';

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

const EMPTY = { probe_id: '', name: '', region: 'na-east', country: 'CA', city: '', provider: '', asn: 0, lat: 0, lon: 0 };

export function Probes() {
  const { data, err, reload } = useAdmin<{ probes: AdminProbe[] }>('/probes');
  const [form, setForm] = useState<typeof EMPTY | null>(null);
  const [key, setKey] = useState<{ probe_id: string; key: string } | null>(null);
  const [msg, setMsg] = useState<string | null>(null);
  const [actErr, setActErr] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

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

  return (
    <AdminPage
      title="Probes"
      desc="Register probes and manage their keys. A key is shown exactly once at creation or rotation — copy it into the agent configuration."
      right={
        <button type="button" className={btnPrimary} onClick={() => setForm({ ...EMPTY })}>
          + probe
        </button>
      }
    >
      <ErrorNote err={err ?? actErr} />
      <Toast msg={msg} />
      {key && (
        <Panel title={`Key for ${key.probe_id} — shown once`} className="mb-3 border-warn/60">
          <div className="flex flex-wrap items-center gap-2">
            <code className="num break-all rounded-[3px] bg-panel-2 px-2 py-1 text-[12px] text-ink">{key.key}</code>
            <button
              type="button"
              className={btnCls}
              onClick={() => {
                void navigator.clipboard.writeText(key.key);
                setMsg('Key copied');
                setTimeout(() => setMsg(null), 2000);
              }}
            >
              copy
            </button>
            <button type="button" className={btnCls} onClick={() => setKey(null)}>
              dismiss
            </button>
          </div>
        </Panel>
      )}
      {form && (
        <Panel title="Register probe" className="mb-3">
          <form
            className="grid grid-cols-2 gap-3 md:grid-cols-5"
            onSubmit={(e) => {
              e.preventDefault();
              void run(async () => {
                const res = await adminFetch<AdminProbe & { key: string }>('/probes', { method: 'POST', body: { ...form, asn: Number(form.asn), lat: Number(form.lat), lon: Number(form.lon) } });
                setKey({ probe_id: res.probe_id, key: res.key });
                setForm(null);
              }, 'Probe registered');
            }}
          >
            {(
              [
                ['probe_id', 'text'],
                ['name', 'text'],
                ['region', 'text'],
                ['country', 'text'],
                ['city', 'text'],
                ['provider', 'text'],
                ['asn', 'number'],
                ['lat', 'number'],
                ['lon', 'number'],
              ] as [keyof typeof EMPTY, string][]
            ).map(([k, type]) => (
              <Field key={k} label={k}>
                <input required={k !== 'city'} type={type} step="any" value={form[k]} onChange={(e) => setForm({ ...form, [k]: type === 'number' ? Number(e.target.value) : e.target.value })} className={`${inputCls} num w-full`} />
              </Field>
            ))}
            <div className="col-span-2 flex items-end gap-2 md:col-span-1">
              <button type="submit" className={btnPrimary} disabled={busy}>
                Create
              </button>
              <button type="button" className={btnCls} onClick={() => setForm(null)}>
                Cancel
              </button>
            </div>
          </form>
        </Panel>
      )}
      <div className="scroll-x">
        <table className="tbl">
          <thead>
            <tr>
              <th>Probe</th>
              <th>Status</th>
              <th>Region</th>
              <th>Location</th>
              <th>Provider</th>
              <th className="r">ASN</th>
              <th className="r">Meas./h</th>
              <th className="r">Uptime</th>
              <th>Version</th>
              <th className="r">Last seen</th>
              <th>Enabled</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {(data?.probes ?? []).map((p) => (
              <tr key={p.probe_id} className={p.enabled === false ? 'opacity-50' : ''}>
                <td>
                  <span className="num text-ink">{p.probe_id}</span> <span className="text-ink-2">{p.name}</span>
                </td>
                <td>
                  <StatusDot status={p.status} />
                </td>
                <td className="num text-ink-2">{p.region}</td>
                <td className="text-ink-2">
                  {p.city}, {p.country} <span className="num text-ink-3">{p.lat}, {p.lon}</span>
                </td>
                <td className="text-ink-2">{p.provider}</td>
                <td className="num r">{p.asn}</td>
                <td className="num r">{fmtInt(p.measurements_1h)}</td>
                <td className="num r">{fmtPct(p.uptime_24h, 1)}</td>
                <td className="num text-ink-2">{p.version ?? '—'}</td>
                <td className="num r text-ink-2">{p.last_seen ? <Time ts={p.last_seen} style="time" /> : '—'}</td>
                <td>
                  <button type="button" className="text-[11px] uppercase tracking-[0.1em]" style={{ color: p.enabled === false ? 'var(--ink-3)' : 'var(--ok)' }} onClick={() => void run(() => adminFetch(`/probes/${encodeURIComponent(p.probe_id)}`, { method: 'PATCH', body: { enabled: p.enabled === false } }), p.enabled === false ? 'Probe enabled' : 'Probe disabled')}>
                    {p.enabled === false ? 'disabled' : 'enabled'}
                  </button>
                </td>
                <td className="r">
                  <button
                    type="button"
                    className="text-[11px] text-ink-2 hover:text-ink"
                    disabled={busy}
                    onClick={() => {
                      if (confirm(`Rotate the key of ${p.probe_id}? The agent must be reconfigured with the new key.`))
                        void run(async () => {
                          const res = await adminFetch<AdminProbe & { key: string }>(`/probes/${encodeURIComponent(p.probe_id)}/rotate-key`, { method: 'POST' });
                          setKey({ probe_id: p.probe_id, key: res.key });
                        }, 'Key rotated');
                    }}
                  >
                    rotate key
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </AdminPage>
  );
}