import type { Metadata } from 'next';
import Link from 'next/link';
import { AdminError, AdminHeader, SectionTitle, Tile } from '@/components/admin/ui';
import { Pagination } from '@/components/ui/pagination';
import { adminApi, safeAdmin } from '@/lib/admin-api';
import { fmtAgo, fmtDateTime, fmtInt, num } from '@/lib/format';

export const metadata: Metadata = { title: 'Data quality' };

const CHECKS: { key: keyof Awaited<ReturnType<typeof adminApi.dataQuality>>['checks']; label: string; hint: string }[] = [
  { key: 'missing_norad', label: 'Missing NORAD', hint: 'satellites without a catalog number' },
  { key: 'missing_cospar', label: 'Missing COSPAR', hint: 'no international designator (analyst / unassigned objects)' },
  { key: 'active_without_operator', label: 'Active without operator', hint: 'active payloads/stations with no resolved operator' },
  { key: 'active_without_country', label: 'Active without country', hint: 'active objects whose owner code has no country' },
  { key: 'stale_active', label: 'Stale active', hint: 'active with GP but latest epoch > 30 d' },
  { key: 'broken_launch_links', label: 'Broken launch links', hint: 'COSPAR present but no launch row' },
  { key: 'active_without_elements', label: 'Active without elements', hint: 'active but never seen in the GP feed' },
];

export default async function AdminDataQualityPage({ searchParams }: { searchParams: Promise<{ page?: string; flag?: string }> }) {
  const sp = await searchParams;
  const page = Math.max(1, Number(sp.page) || 1);
  const flag = sp.flag || null;
  const res = await safeAdmin(adminApi.dataQuality(page, flag, 50));
  if (res.error !== null) {
    return (
      <>
        <AdminHeader title="Data quality" />
        <AdminError message={res.error} />
      </>
    );
  }
  const d = res.data;
  const now = Date.now();
  const href = (p: number, f: string | null = flag) => `/admin/data-quality?${new URLSearchParams({ ...(f ? { flag: f } : {}), ...(p > 1 ? { page: String(p) } : {}) }).toString()}`;
  return (
    <>
      <AdminHeader title="Data quality" lede="Live checks computed on the canonical satellites table, plus the open flags raised by the connectors during normalization. Flags are never auto-resolved by deleting data." />

      <SectionTitle>Checks (live counts)</SectionTitle>
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-7">
        {CHECKS.map((c) => {
          const v = num(d.checks[c.key]) ?? 0;
          return <Tile key={c.key} label={c.label} value={fmtInt(v)} hint={c.hint} tone={v > 0 && (c.key === 'stale_active' || c.key === 'broken_launch_links' || c.key === 'missing_norad') ? 'warn' : undefined} />;
        })}
      </div>

      <SectionTitle>Open flags by type</SectionTitle>
      {d.summary.length === 0 ? (
        <p className="rounded-md border border-dashed border-rule-strong px-4 py-6 text-center text-sm text-ink-3">No open quality flags</p>
      ) : (
        <div className="no-scrollbar -mx-4 flex gap-1.5 overflow-x-auto px-4 md:mx-0 md:flex-wrap md:px-0">
          <Link href={href(1, null)} className={`inline-flex min-h-9 shrink-0 items-center rounded-md border px-3 text-xs ${!flag ? 'border-accent/40 bg-accent-soft text-accent' : 'border-rule text-ink-2 hover:bg-plane-2'}`}>
            All ({fmtInt(d.summary.reduce((a, s) => a + (num(s.open) ?? 0), 0))})
          </Link>
          {d.summary.map((s) => (
            <Link key={s.flag} href={href(1, s.flag)} className={`mono inline-flex min-h-9 shrink-0 items-center rounded-md border px-3 text-xs ${flag === s.flag ? 'border-accent/40 bg-accent-soft text-accent' : 'border-rule text-ink-2 hover:bg-plane-2'}`}>
              {s.flag} · {fmtInt(s.open)}
            </Link>
          ))}
        </div>
      )}

      <SectionTitle>Flagged satellites</SectionTitle>
      {d.data.length === 0 ? (
        <p className="rounded-md border border-dashed border-rule-strong px-4 py-6 text-center text-sm text-ink-3">No flagged rows{flag ? ` for ${flag}` : ''}</p>
      ) : (
        <>
          <div className="overflow-x-auto">
            <table className="data-table stack md:min-w-[800px]">
              <thead>
                <tr>
                  <th>Satellite</th>
                  <th>Flag</th>
                  <th>Detail</th>
                  <th>Raised</th>
                </tr>
              </thead>
              <tbody>
                {d.data.map((f) => (
                  <tr key={f.id}>
                    <td className="primary">
                      {f.slug ? (
                        <Link href={`/satellite/${f.slug}`} className="text-sm text-ink hover:text-accent">
                          {f.name ?? f.slug}
                        </Link>
                      ) : (
                        <span className="mono text-xs text-ink-2">
                          {f.entity_type} {f.entity_id}
                        </span>
                      )}
                      {f.norad_id !== null && <span className="mono ml-2 text-xs text-ink-3">NORAD {f.norad_id}</span>}
                    </td>
                    <td data-label="Flag" className="mono text-xs text-warn">
                      {f.flag}
                    </td>
                    <td data-label="Detail" className="text-sm text-ink-2">
                      {f.detail ?? '—'}
                    </td>
                    <td data-label="Raised" title={fmtDateTime(f.created_at)} className="text-sm text-ink-2">
                      {fmtAgo(f.created_at, now)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <Pagination className="mt-4" page={d.pagination.page} pages={d.pagination.pages} total={d.pagination.total} pageSize={d.pagination.page_size} makeHref={(p) => href(p)} />
        </>
      )}
    </>
  );
}