'use client';

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

export function Boost() {
  const { data } = useAdmin<{ targets: AdminTarget[] }>('/targets');
  const [q, setQ] = useState('');
  const [sel, setSel] = useState<Set<string>>(new Set());
  const [factor, setFactor] = useState(0.5);
  const [seconds, setSeconds] = useState(900);
  const [msg, setMsg] = useState<string | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const list = (data?.targets ?? []).filter((t) => !q || t.hostname.includes(q) || t.name.toLowerCase().includes(q.toLowerCase()) || t.service_id.includes(q));
  const toggle = (id: string) =>
    setSel((s) => {
      const n = new Set(s);
      if (n.has(id)) n.delete(id);
      else n.add(id);
      return n;
    });
  return (
    <AdminPage title="Sampling boost" desc="Temporarily multiply the check interval of selected targets by a factor < 1 (0.5 = twice as often) for a limited time. Pushed to probes at their next config refresh; never exceeds the ethical traffic budget.">
      <div className="grid grid-cols-[minmax(0,1fr)] gap-3 lg:grid-cols-[minmax(0,1fr)_300px]">
        <Panel title="Targets" right={<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="filter…" className={inputCls} aria-label="Filter" />}>
          <div className="flex gap-2 text-[11px]">
            <button type="button" className="text-ink-2 hover:text-ink" onClick={() => setSel(new Set(list.map((t) => t.target_id)))}>
              select shown ({list.length})
            </button>
            <button type="button" className="text-ink-2 hover:text-ink" onClick={() => setSel(new Set())}>
              clear
            </button>
          </div>
          <ul className="mt-2 max-h-[60vh] overflow-auto divide-y divide-line">
            {list.map((t) => (
              <li key={t.target_id}>
                <label className="flex cursor-pointer items-center gap-3 py-1.5 text-[12.5px]">
                  <input type="checkbox" checked={sel.has(t.target_id)} onChange={() => toggle(t.target_id)} className="accent-[var(--accent)]" />
                  <span className="text-ink">{t.name}</span>
                  <span className="num text-ink-3">{t.hostname}</span>
                  <span className="num ml-auto text-ink-3">tier {t.tier}</span>
                </label>
              </li>
            ))}
          </ul>
        </Panel>
        <Panel title="Boost">
          <Field label="factor (interval multiplier)">
            <input type="number" step="0.1" min={0.1} max={1} value={factor} onChange={(e) => setFactor(Number(e.target.value))} className={`${inputCls} num w-full`} />
          </Field>
          <div className="mt-3">
            <Field label="duration (seconds)">
              <input type="number" step="60" min={60} max={7200} value={seconds} onChange={(e) => setSeconds(Number(e.target.value))} className={`${inputCls} num w-full`} />
            </Field>
          </div>
          <p className="num mt-3 text-[11px] text-ink-3">
            {sel.size} targets · ×{factor} for {Math.round(seconds / 60)} min
          </p>
          <button
            type="button"
            className={`${btnPrimary} mt-3 w-full`}
            disabled={!sel.size || busy || factor <= 0 || factor > 1}
            onClick={() => {
              setBusy(true);
              setErr(null);
              adminFetch('/boost', { method: 'POST', body: { targets: [...sel], factor, seconds } })
                .then(() => setMsg(`Boost pushed for ${sel.size} targets`))
                .catch((e: unknown) => setErr(String(e)))
                .finally(() => {
                  setBusy(false);
                  setTimeout(() => setMsg(null), 4000);
                });
            }}
          >
            Push boost
          </button>
          <Toast msg={msg} />
          <ErrorNote err={err} />
        </Panel>
      </div>
    </AdminPage>
  );
}