"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import { Badge, EmptyState, RelativeTime, SearchInput, SkeletonRows, Table, TBody, Td, Th, THead, Tr } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtInt } from "@/lib/format";
import { SOURCE_KIND_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";
import type { SourceListItem } from "@/lib/admin-api";
import { ErrorNote, ExtLink, Mono, RefreshButton, Select } from "./primitives";
import { AdminPageHeader } from "./shell";
import { useAdminQuery } from "./use-admin-query";

type SortKey = "name" | "kind" | "documents" | "provenanceRows" | "facilities" | "lastDocumentAt";

export function SourcesTable() {
  const q = useAdminQuery<SourceListItem[]>("v1/sources", { refreshMs: 120_000 });
  const [kind, setKind] = useState("");
  const [search, setSearch] = useState("");
  const [sort, setSort] = useState<{ key: SortKey; dir: "asc" | "desc" }>({ key: "provenanceRows", dir: "desc" });
  const list = useMemo(() => q.data ?? [], [q.data]);
  const kinds = useMemo(() => [...new Set(list.map((s) => s.kind))].sort(), [list]);
  const rows = useMemo(() => {
    const s = search.trim().toLowerCase();
    const out = list.filter((x) => (!kind || x.kind === kind) && (!s || x.name.toLowerCase().includes(s) || x.domain.toLowerCase().includes(s) || (x.connectorId ?? "").includes(s) || (x.license ?? "").toLowerCase().includes(s)));
    out.sort((a, b) => {
      const va = a[sort.key];
      const vb = b[sort.key];
      const cmp = typeof va === "number" && typeof vb === "number" ? va - vb : String(va ?? "").localeCompare(String(vb ?? ""));
      return (sort.dir === "asc" ? cmp : -cmp) || a.name.localeCompare(b.name);
    });
    return out;
  }, [list, kind, search, sort]);
  const th = (key: SortKey, label: string, numeric?: boolean) => (
    <Th numeric={numeric} sort={sort.key === key ? sort.dir : null} className="cursor-pointer select-none" onClick={() => setSort((s) => ({ key, dir: s.key === key ? (s.dir === "asc" ? "desc" : "asc") : numeric ? "desc" : "asc" }))}>
      {label}
    </Th>
  );
  const totals = useMemo(() => rows.reduce((a, s) => ({ documents: a.documents + s.documents, provenance: a.provenance + s.provenanceRows, facilities: a.facilities + s.facilities, licensed: a.licensed + (s.license ? 1 : 0) }), { documents: 0, provenance: 0, facilities: 0, licensed: 0 }), [rows]);

  return (
    <div>
      <AdminPageHeader title="Sources" description={q.data ? `${fmtInt(list.length)} sources · ${fmtInt(totals.licensed)} with a recorded license · ${fmtInt(totals.provenance)} provenance rows` : "Every source behind the index, with license, attribution and what it produced"} aside={<RefreshButton onClick={() => void q.refresh()} busy={q.refreshing} updatedAt={q.updatedAt} />} />
      <ErrorNote error={q.error && !q.data ? q.error : null} onRetry={() => void q.refresh()} className="mb-3" />
      <div className="mb-3 flex flex-col gap-2 sm:flex-row">
        <Select value={kind} onChange={(e) => setKind(e.target.value)} className="sm:w-[180px]" aria-label="Kind">
          <option value="">All kinds</option>
          {kinds.map((k) => (
            <option key={k} value={k}>
              {SOURCE_KIND_LABEL[k] ?? k}
            </option>
          ))}
        </Select>
        <SearchInput size="sm" value={search} onChange={setSearch} placeholder="Search name, domain, connector, license" wrapperClassName="flex-1" />
      </div>
      {q.loading && !q.data ? (
        <SkeletonRows rows={10} />
      ) : rows.length === 0 ? (
        <EmptyState compact title="No sources match" />
      ) : (
        <div className="rounded-sm border border-hair bg-surface px-3">
          <Table className="text-[12.5px]">
            <THead>
              <Tr>
                {th("name", "Source")}
                {th("kind", "Kind")}
                <Th>License</Th>
                <Th>Attribution</Th>
                <Th>Docs</Th>
                {th("documents", "Documents", true)}
                {th("provenanceRows", "Provenance", true)}
                {th("facilities", "Facilities", true)}
                {th("lastDocumentAt", "Last document")}
              </Tr>
            </THead>
            <TBody>
              {rows.map((s) => (
                <Tr key={s.id}>
                  <Td primary label="Source" className="max-w-[260px]">
                    <Link href={routes.source(s.id)} target="_blank" className="block truncate font-medium text-ink hover:text-accent hover:underline">
                      {s.name}
                    </Link>
                    <div className="flex flex-wrap items-center gap-1.5 text-[11.5px] text-ink-3">
                      <span className="truncate">{s.domain}</span>
                      {s.connectorId && (
                        <Link href={`/admin/connectors/${encodeURIComponent(s.connectorId)}`} className="font-mono hover:text-accent">
                          {s.connectorId}
                        </Link>
                      )}
                      {s.robotsAllowed === false && (
                        <Badge size="xs" tone="danger">
                          robots blocked
                        </Badge>
                      )}
                    </div>
                  </Td>
                  <Td label="Kind" muted>
                    {SOURCE_KIND_LABEL[s.kind] ?? s.kind}
                  </Td>
                  <Td label="License" className={cn("max-w-[260px]", !s.license && "text-warn")}>
                    <span className="line-clamp-2" title={s.license ?? undefined}>
                      {s.license ?? "not recorded"}
                    </span>
                  </Td>
                  <Td label="Attribution" className="max-w-[200px]">
                    <span className="line-clamp-2" title={s.attribution ?? undefined}>
                      {s.attribution ?? DASH}
                    </span>
                  </Td>
                  <Td label="Docs">
                    {s.url ? <ExtLink href={s.url}>link</ExtLink> : <span className="text-ink-4">{DASH}</span>}
                    {s.notes && (
                      <span className="ml-1 cursor-help text-ink-4" title={s.notes}>
                        ⓘ
                      </span>
                    )}
                  </Td>
                  <Td label="Documents" numeric>
                    {fmtInt(s.documents)}
                  </Td>
                  <Td label="Provenance" numeric>
                    {fmtInt(s.provenanceRows)}
                  </Td>
                  <Td label="Facilities" numeric>
                    {fmtInt(s.facilities)}
                  </Td>
                  <Td label="Last document" muted>
                    {s.lastDocumentAt ? <RelativeTime iso={s.lastDocumentAt} /> : <Mono>{DASH}</Mono>}
                  </Td>
                </Tr>
              ))}
            </TBody>
          </Table>
          <div className="flex flex-wrap gap-4 border-t border-hair py-2 text-[12px] text-ink-3">
            <span>{fmtInt(rows.length)} sources</span>
            <span className="figure">{fmtInt(totals.documents)} documents</span>
            <span className="figure">{fmtInt(totals.provenance)} provenance rows</span>
            <span className="figure">{fmtInt(totals.facilities)} facilities</span>
          </div>
        </div>
      )}
    </div>
  );
}