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 { HealthLabel, SourceLogo, Pct, Progress, Chip } from '@/components/admin/connector-bits';
import { Table, th, td, tdNum } from '@/components/ui/primitives';

type Row = Record<string, unknown>;

function str(v: unknown): string {
  return v === null || v === undefined ? '' : String(v);
}

/** Connector explorer (SPEC §29): every connector with source, geography, acquisition, health, usage, backfill and actions. */
export default async function ConnectorsPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const rowsAll = (await connectorsOverview()) as Row[];
  const q = (sp.q ?? '').toLowerCase();
  const status = sp.status ?? '';
  const category = sp.category ?? '';
  const country = sp.country ?? '';
  const rows = rowsAll.filter((r) => {
    const meta = (r.meta ?? {}) as Row;
    if (status && String(r.health_status ?? 'unknown') !== status && String(r.status) !== status) return false;
    if (category && !((r.categories as string[]) ?? []).includes(category)) return false;
    if (country && String(meta.country ?? (r.regions as string[])?.[0] ?? '') !== country) return false;
    if (q && !`${str(r.id)} ${str(r.display_name)} ${str(meta.domain)} ${((r.categories as string[]) ?? []).join(' ')}`.toLowerCase().includes(q)) return false;
    return true;
  });
  const counts = rowsAll.reduce<Record<string, number>>((acc, r) => {
    const k = String(r.health_status ?? 'unknown');
    acc[k] = (acc[k] ?? 0) + 1;
    return acc;
  }, {});
  const categories = [...new Set(rowsAll.flatMap((r) => (r.categories as string[]) ?? []))].sort();
  const countries = [...new Set(rowsAll.map((r) => String(((r.meta ?? {}) as Row).country ?? (r.regions as string[])?.[0] ?? 'global')))].sort();

  return (
    <AdminShell
      current="/admin/connectors"
      title="Connector explorer"
      subtitle={
        <>
          {rowsAll.length} connectors · {Object.entries(counts).map(([k, v]) => `${v} ${k}`).join(' · ')} · <Link href="/admin/coverage" className="underline">coverage dashboard</Link> · <Link href="/api/admin/connectors" className="underline">JSON</Link>
        </>
      }
      actions={
        <form className="flex flex-wrap items-center gap-1 text-xs" method="get">
          <input name="q" defaultValue={sp.q ?? ''} placeholder="search id, domain, category" className="rounded-md border border-border bg-sunken px-2 py-1 text-xs" />
          <select name="status" defaultValue={status} className="rounded-md border border-border bg-sunken px-2 py-1 text-xs">
            <option value="">any health</option>
            {['healthy', 'degraded', 'failing', 'disabled', 'paused', 'maintenance', 'unknown'].map((s) => (
              <option key={s} value={s}>{s}</option>
            ))}
          </select>
          <select name="category" defaultValue={category} className="rounded-md border border-border bg-sunken px-2 py-1 text-xs">
            <option value="">any category</option>
            {categories.map((c) => (
              <option key={c} value={c}>{c}</option>
            ))}
          </select>
          <select name="country" defaultValue={country} className="rounded-md border border-border bg-sunken px-2 py-1 text-xs">
            <option value="">any country</option>
            {countries.map((c) => (
              <option key={c} value={c}>{c}</option>
            ))}
          </select>
          <button type="submit" className="rounded-md border border-border px-2 py-1 text-xs hover:bg-inset">Filter</button>
        </form>
      }
    >
      <div className="card overflow-x-auto">
        <Table>
          <thead>
            <tr>
              <th className={th}>Source</th>
              <th className={th}>Category · country</th>
              <th className={th}>Health</th>
              <th className={th}>Status</th>
              <th className={th}>Acquisition</th>
              <th className={th}>Last sync</th>
              <th className={`${th} text-right`}>Items 24h</th>
              <th className={`${th} text-right`}>Errors</th>
              <th className={`${th} text-right`}>FC · SF credits</th>
              <th className={th}>Rate limit</th>
              <th className={th}>Priority</th>
              <th className={th}>Backfill</th>
              <th className={th}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 ? (
              <tr>
                <td className={td} colSpan={13}>
                  <span className="text-subtle">No connector matches. Add meta.json files under connectors/, run pnpm registry && pnpm db:seed.</span>
                </td>
              </tr>
            ) : null}
            {rows.map((r) => {
              const meta = (r.meta ?? {}) as Row;
              const health = (r.health ?? {}) as Row;
              const anomalies = Array.isArray(r.last_anomalies) ? (r.last_anomalies as string[]) : [];
              const drift = ((health.schema_drift as string[]) ?? []).length > 0 || anomalies.some((a) => /schema_drift|selector|pagination_failure|result_count_collapse/.test(a));
              const httpErrors = Object.values((health.http_errors as Record<string, number>) ?? {}).reduce((a, b) => a + b, 0);
              const cats = (r.categories as string[]) ?? [];
              const id = str(r.id);
              const domain = str(meta.domain);
              const country = str(meta.country ?? (r.regions as string[])?.[0] ?? 'global');
              const refresh = Number(r.refresh_frequency_minutes);
              const refreshClass = str(meta.refreshClass) || (refresh <= 5 ? 'hot' : refresh <= 60 ? 'active' : refresh <= 1440 ? 'normal' : 'archive');
              const missing = (health.missing_requirements as string[]) ?? [];
              return (
                <tr key={id} className="align-top">
                  <td className={td}>
                    <div className="flex items-center gap-2">
                      <SourceLogo domain={domain} name={str(r.display_name)} logoUrl={str(meta.logoUrl) || null} />
                      <div>
                        <Link href={`/admin/connectors/${id}`} className="font-medium hover:underline">{str(r.display_name)}</Link>
                        <div className="text-[11px] text-subtle">
                          {domain ? (
                            <a href={`https://${domain}`} target="_blank" rel="noreferrer noopener" className="hover:underline">{domain}</a>
                          ) : (
                            id
                          )}
                          {' · '}
                          {id}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td className={td}>
                    <div className="flex max-w-[220px] flex-wrap gap-1">
                      {cats.slice(0, 3).map((c) => (
                        <Chip key={c}>{c}</Chip>
                      ))}
                      {cats.length > 3 ? <Chip>+{cats.length - 3}</Chip> : null}
                      <Chip tone="index">{country}</Chip>
                    </div>
                  </td>
                  <td className={td}>
                    <HealthLabel status={str(r.health_status) || 'unknown'} />
                    <div className="text-[10px] text-subtle">
                      {health.success_rate_24h != null ? <>success <Pct value={health.success_rate_24h} /></> : 'no runs 24h'}
                      {r.health_at ? ` · ${fmtTs(r.health_at).slice(5, 16)}` : ''}
                    </div>
                    {drift ? <div className="text-[10px] text-alert">schema drift?</div> : null}
                    {missing.length ? <div className="text-[10px] text-alert">needs {missing.join(', ')}</div> : null}
                  </td>
                  <td className={td}>
                    <StatusPill status={str(r.status)} />
                    {r.last_run_status ? <div className="text-[10px] text-subtle">run: {str(r.last_run_status)}</div> : null}
                  </td>
                  <td className={td}>
                    <div className="text-xs">{str(meta.acquisitionMethod) || (r.engine_priority as string[]).join(' → ')}</div>
                    <div className="text-[10px] text-subtle">{(r.engine_priority as string[]).join('→')} · {refreshClass} · every {n(refresh)} min</div>
                  </td>
                  <td className={td}>
                    {fmtTs(r.last_started_at)}
                    <div className="text-[10px] text-subtle">ok: {fmtTs(r.last_success_at).slice(0, 16)}</div>
                    <div className="text-[10px] text-subtle">fresh: {health.data_freshness ? fmtTs(health.data_freshness).slice(0, 10) : '—'}</div>
                  </td>
                  <td className={tdNum}>
                    {n(r.records_24h)}
                    <div className="text-[10px] text-subtle">{n(r.normalized_24h)} norm. · {n(r.duplicates_24h)} dup.</div>
                    <div className="text-[10px] text-subtle">{n(r.pages_per_min, 1)} pages/min</div>
                  </td>
                  <td className={`${tdNum} ${r.last_error || httpErrors ? 'text-loss' : ''}`} title={str(r.last_error)}>
                    {httpErrors || (r.last_error ? 1 : 0)}
                    {anomalies.length ? <div className="text-[10px] text-alert">{anomalies.length} anomal.</div> : null}
                    {Number(health.challenges_24h) > 0 ? <div className="text-[10px] text-alert">{n(health.challenges_24h)} challenges</div> : null}
                  </td>
                  <td className={tdNum}>
                    {n(r.fc_credits_24h)} · {n(r.sf_credits_24h)}
                    <div className="text-[10px] text-subtle">
                      FC <Pct value={health.firecrawl_success_rate} /> · SF <Pct value={health.scrapfly_fallback_rate} />
                    </div>
                  </td>
                  <td className={td}>
                    <div className="text-xs">{health.latency_ms_avg != null ? `${n(health.latency_ms_avg)} ms` : '—'}</div>
                    <div className="text-[10px] text-subtle">{Number(health.rate_limited_24h) > 0 ? `${n(health.rate_limited_24h)}× 429` : 'no 429'} · {n(health.requests_24h)} req</div>
                  </td>
                  <td className={td}>
                    <Chip tone={str(r.priority) === 'high' ? 'index' : 'neutral'}>{str(r.priority)}</Chip>
                    <div className="text-[10px] text-subtle">trust {source_trust(meta)}</div>
                  </td>
                  <td className={td}>{r.backfill_id ? <Progress percent={r.backfill_percent as number | null} status={str(r.backfill_status)} /> : <span className="text-[10px] text-subtle">{str(meta.historicalDepth) && str(meta.historicalDepth) !== 'none' ? `history: ${str(meta.historicalDepth)}` : '—'}</span>}</td>
                  <td className={td}>
                    <div className="flex max-w-[210px] flex-wrap gap-1">
                      {(
                        [
                          ['probe', 'Test'],
                          ['run', 'Run now'],
                          ['backfill', 'Backfill'],
                        ] as const
                      ).map(([a, label]) => (
                        <form key={a} action={connectorAction}>
                          <input type="hidden" name="id" value={id} />
                          <input type="hidden" name="action" value={a} />
                          <ActionButton label={label} />
                        </form>
                      ))}
                      <form action={connectorAction}>
                        <input type="hidden" name="id" value={id} />
                        <input type="hidden" name="action" value={r.status === 'active' ? 'pause' : 'resume'} />
                        <ActionButton label={r.status === 'active' ? 'Pause' : 'Resume'} tone={r.status === 'active' ? 'danger' : 'primary'} />
                      </form>
                      <Link href={`/admin/connectors/${id}`} className="rounded-md border border-border px-2 py-0.5 text-[11px] font-medium hover:bg-inset">Logs</Link>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </Table>
      </div>
      <p className="mt-3 text-[11px] text-subtle">
        Test = 25-record probe · Run now = incremental crawl · Backfill = resumable historical campaign (progress in the Backfill column) · Pause/Resume flips scheduling; Maintenance is available on the connector page. FC/SF = Firecrawl/Scrapfly credits spent in 24 h and success/fallback rates. Health labels: UP · DEGRADED · BROKEN · DISABLED · MAINTENANCE.
      </p>
    </AdminShell>
  );
}

function source_trust(meta: Row): string {
  const t = Number(meta.trustScore);
  return Number.isFinite(t) ? `${Math.round(t * 100)}%` : '—';
}