import Link from 'next/link';
import { requireAdmin } from '@/lib/admin/auth';
import { connectorsOverview } from '@/lib/admin/queries';
import { connectorAction } from '@/lib/admin/actions';
import { AdminShell, ActionButton, StatusPill, fmtTs, n } from '@/components/admin/shell';
import { Table, th, td, tdNum } from '@/components/ui/primitives';

function pct(v: unknown): string {
  const x = Number(v);
  return Number.isFinite(x) ? `${Math.round(x * 100)}%` : '—';
}

export default async function ConnectorsPage() {
  await requireAdmin();
  const rows = await connectorsOverview();
  return (
    <AdminShell current="/admin/connectors" title="Connector control center" subtitle={`${rows.length} connectors registered · actions enqueue jobs on the crawl.run queue consumed by the worker`}>
      <div className="card">
        <Table>
          <thead>
            <tr>
              <th className={th}>Connector</th>
              <th className={th}>Health</th>
              <th className={th}>Status</th>
              <th className={`${th} text-right`}>Pages/min</th>
              <th className={`${th} text-right`}>Errors</th>
              <th className={th}>Last crawl</th>
              <th className={`${th} text-right`}>Records 24h</th>
              <th className={`${th} text-right`}>Dup.</th>
              <th className={`${th} text-right`}>FC rate</th>
              <th className={`${th} text-right`}>SF rate</th>
              <th className={`${th} text-right`}>Parser conf.</th>
              <th className={th}>Schema</th>
              <th className={th}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 ? <tr><td className={td} colSpan={13}><span className="text-subtle">No connectors in the registry yet. Add meta.json files under connectors/ and run pnpm db:seed.</span></td></tr> : null}
            {rows.map((r) => {
              const health = (r.health ?? {}) as Record<string, unknown>;
              const anomalies = Array.isArray(r.last_anomalies) ? (r.last_anomalies as string[]) : [];
              const drift = anomalies.some((a) => /schema|selector|missing_field|redesign/.test(a));
              return (
                <tr key={String(r.id)} className="align-top">
                  <td className={td}>
                    <Link href={`/admin/connectors/${String(r.id)}`} className="font-medium hover:underline">{String(r.display_name)}</Link>
                    <div className="text-[11px] text-subtle">{String(r.id)} · {(r.engine_priority as string[]).join('→')} · {String(r.priority)} · every {n(r.refresh_frequency_minutes)} min</div>
                  </td>
                  <td className={td}><StatusPill status={(r.health_status as string) ?? 'unknown'} />{r.health_at ? <div className="text-[10px] text-subtle">{fmtTs(r.health_at)}</div> : null}</td>
                  <td className={td}><StatusPill status={String(r.status)} />{r.last_run_status ? <div className="text-[10px] text-subtle">run: {String(r.last_run_status)}</div> : null}</td>
                  <td className={tdNum}>{n(r.pages_per_min, 1)}</td>
                  <td className={`${tdNum} ${r.last_error ? 'text-loss' : ''}`} title={String(r.last_error ?? '')}>{r.last_error ? '1' : '0'}{anomalies.length ? <div className="text-[10px] text-alert">{anomalies.length} anomal.</div> : null}</td>
                  <td className={td}>{fmtTs(r.last_started_at)}<div className="text-[10px] text-subtle">ok: {fmtTs(r.last_success_at)}</div></td>
                  <td className={tdNum}>{n(r.records_24h)}<div className="text-[10px] text-subtle">{n(r.normalized_24h)} norm.</div></td>
                  <td className={tdNum}>{n(r.duplicates_24h)}</td>
                  <td className={tdNum}>{pct(health.firecrawl_success_rate)}</td>
                  <td className={tdNum}>{pct(health.scrapfly_fallback_rate)}</td>
                  <td className={tdNum}>{pct(r.parser_confidence)}</td>
                  <td className={td}>v{String(r.schema_version)}{drift ? <div className="text-[10px] text-alert">drift?</div> : null}</td>
                  <td className={td}>
                    <div className="flex flex-wrap gap-1">
                      {(['run', 'probe', 'recrawl', 'retry'] as const).map((a) => (
                        <form key={a} action={connectorAction}>
                          <input type="hidden" name="id" value={String(r.id)} />
                          <input type="hidden" name="action" value={a} />
                          <ActionButton label={a} />
                        </form>
                      ))}
                      <form action={connectorAction}>
                        <input type="hidden" name="id" value={String(r.id)} />
                        <input type="hidden" name="action" value={r.status === 'paused' ? 'resume' : 'pause'} />
                        <ActionButton label={r.status === 'paused' ? 'resume' : 'pause'} tone={r.status === 'paused' ? 'primary' : 'danger'} />
                      </form>
                      <Link href={`/admin/connectors/${String(r.id)}`} className="rounded-md border border-border px-2 py-0.5 text-[11px] font-medium hover:bg-inset">inspect</Link>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </Table>
      </div>
      <p className="mt-3 text-[11px] text-subtle">run = incremental crawl · probe = 25-record smoke test · recrawl = backfill mode · retry = re-run from the last cursor. FC = Firecrawl success rate, SF = share of pages that needed Scrapfly (from the 24 h health snapshot).</p>
    </AdminShell>
  );
}