'use client';

import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useMemo, useRef, useState } from 'react';
import { PNum } from '@/components/ui/primitives';
import { fmtInt, fmtMs, fmtPct } from '@/lib/format';
import type { Target } from '@/lib/types';

type SortKey = 'pressure' | 'name' | 'ok_ratio_1h' | 'ttfb_ms_median_1h' | 'importance';

export function TargetsRegistry({ targets, categories, initialQuery, initialCategory, total, page, pages, pageSize }: { targets: Target[]; categories: string[]; initialQuery: string; initialCategory: string; total: number; page: number; pages: number; pageSize: number }) {
  const [q, setQ] = useState(initialQuery);
  const [cat, setCat] = useState(initialCategory);
  const router = useRouter();
  const sp = useSearchParams();
  const first = useRef(true);
  // filters are applied server-side (the registry is paginated): push them to the URL, debounced
  useEffect(() => {
    if (first.current) {
      first.current = false;
      return;
    }
    const t = setTimeout(() => {
      const next = new URLSearchParams(sp.toString());
      if (q) next.set('q', q);
      else next.delete('q');
      if (cat) next.set('category', cat);
      else next.delete('category');
      next.delete('page');
      router.replace(`/targets?${next.toString()}`, { scroll: false });
    }, 350);
    return () => clearTimeout(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [q, cat]);
  const pageHref = (n: number) => {
    const next = new URLSearchParams(sp.toString());
    if (n > 1) next.set('page', String(n));
    else next.delete('page');
    return `/targets?${next.toString()}`;
  };
  const [sort, setSort] = useState<SortKey>('pressure');
  const [dir, setDir] = useState<1 | -1>(-1);

  const rows = useMemo(() => {
    const s = q.trim().toLowerCase();
    return targets
      .filter((t) => (!cat || t.category === cat) && (!s || t.hostname.toLowerCase().includes(s) || t.name.toLowerCase().includes(s) || (t.provider ?? '').toLowerCase().includes(s) || t.target_id.includes(s)))
      .sort((a, b) => {
        const av = a[sort];
        const bv = b[sort];
        if (typeof av === 'string' && typeof bv === 'string') return av.localeCompare(bv) * dir;
        return ((av as number) - (bv as number)) * dir;
      });
  }, [targets, q, cat, sort, dir]);

  const th = (key: SortKey, label: string, right = false) => (
    <th className={right ? 'r' : ''} aria-sort={sort === key ? (dir === 1 ? 'ascending' : 'descending') : 'none'}>
      <button
        type="button"
        onClick={() => {
          if (sort === key) setDir((d) => (d === 1 ? -1 : 1));
          else {
            setSort(key);
            setDir(key === 'name' ? 1 : -1);
          }
        }}
        className={`uppercase tracking-[0.1em] hover:text-ink ${sort === key ? 'text-ink' : ''}`}
      >
        {label}
        {sort === key ? (dir === 1 ? ' ↑' : ' ↓') : ''}
      </button>
    </th>
  );

  return (
    <div>
      <div className="flex flex-wrap items-center gap-2">
        <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="hostname, provider, id…" className="h-8 w-full max-w-[320px] rounded-[4px] border border-line bg-panel px-2 text-[13px] text-ink placeholder:text-ink-3" aria-label="Filter targets" />
        <div className="scroll-x flex gap-1" role="radiogroup" aria-label="Category">
          <button type="button" role="radio" aria-checked={!cat} onClick={() => setCat('')} className={`whitespace-nowrap rounded-[3px] border px-2 py-1 text-[11px] ${!cat ? 'border-line-2 bg-panel-2 text-ink' : 'border-line text-ink-2 hover:text-ink'}`}>
            all
          </button>
          {categories.map((c) => (
            <button key={c} type="button" role="radio" aria-checked={cat === c} onClick={() => setCat(c)} className={`whitespace-nowrap rounded-[3px] border px-2 py-1 text-[11px] ${cat === c ? 'border-line-2 bg-panel-2 text-ink' : 'border-line text-ink-2 hover:text-ink'}`}>
              {c}
            </button>
          ))}
        </div>
        <span className="num ml-auto text-[11px] text-ink-3">{fmtInt(rows.length)} shown · {fmtInt(total)} match · page {page}/{pages}</span>
      </div>
      <div className="scroll-x -mx-3 mt-3 px-3">
        <table className="tbl">
          <thead>
            <tr>
              {th('name', 'Target')}
              <th className="hidden md:table-cell">Hostname</th>
              <th className="hidden sm:table-cell">Category</th>
              <th className="hidden lg:table-cell">Service</th>
              <th className="hidden sm:table-cell">Anchor</th>
              {th('importance', 'Imp.', true)}
              <th className="r hidden md:table-cell">Tier</th>
              {th('pressure', 'Pressure', true)}
              {th('ok_ratio_1h', 'OK 1h', true)}
              {th('ttfb_ms_median_1h', 'TTFB', true)}
            </tr>
          </thead>
          <tbody>
            {rows.map((t) => (
              <tr key={t.target_id}>
                <td>
                  <span className="text-ink">{t.name}</span>
                </td>
                <td className="num hidden text-ink-2 md:table-cell">{t.hostname}</td>
                <td className="hidden text-ink-2 sm:table-cell">{t.category}</td>
                <td className="hidden lg:table-cell">
                  {t.service_id ? (
                    <Link href={`/service/${t.service_id}`} className="text-ink-2 hover:text-accent">
                      {t.service_id}
                    </Link>
                  ) : (
                    <span className="text-ink-3">—</span>
                  )}
                </td>
                <td className="hidden sm:table-cell">
                  {t.country ? (
                    <Link href={`/country/${t.country.toLowerCase()}`} className="text-ink-2 hover:text-accent">
                      {t.country}
                    </Link>
                  ) : (
                    <span className="text-ink-3">global</span>
                  )}
                </td>
                <td className="num r text-ink-2">{t.importance}</td>
                <td className="num r hidden text-ink-2 md:table-cell">{t.tier}</td>
                <td className="r">
                  <PNum value={t.pressure} />
                </td>
                <td className="num r" style={{ color: t.ok_ratio_1h != null && t.ok_ratio_1h < 0.98 ? 'var(--p-high)' : undefined }}>
                  {fmtPct(t.ok_ratio_1h, 1)}
                </td>
                <td className="num r text-ink-2">{fmtMs(t.ttfb_ms_median_1h)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {pages > 1 && (
        <nav className="mt-3 flex items-center gap-2 text-[12px]" aria-label="Pagination">
          {page > 1 ? <Link href={pageHref(page - 1)} className="text-ink-2 hover:text-accent">← previous</Link> : <span className="text-ink-3">← previous</span>}
          <span className="num text-ink-3">
            {fmtInt((page - 1) * pageSize + 1)}–{fmtInt(Math.min(page * pageSize, total))} of {fmtInt(total)}
          </span>
          {page < pages ? <Link href={pageHref(page + 1)} className="text-ink-2 hover:text-accent">next →</Link> : <span className="text-ink-3">next →</span>}
        </nav>
      )}
    </div>
  );
}