"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { PAGE_TYPES } from "@dci/core";
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 type { AdminDocument, ConnectorHealthDTO } from "@/lib/admin-api";
import { ErrorNote, fmtBytes, LevelBadge, Pager, RefreshButton, Segmented, Select } from "./primitives";
import { AdminPageHeader } from "./shell";
import { useAdminQuery } from "./use-admin-query";
import { useUrlState } from "./use-url-state";

const STATUS = ["all", "error", "changed", "quarantined"] as const;
type Status = (typeof STATUS)[number];
const PER_PAGE = 50;

export function DocumentsTable() {
  const [params, setParams] = useUrlState();
  const connector = params.connector ?? "";
  const pageType = params.pageType ?? "";
  const status = (STATUS.includes(params.status as Status) ? params.status : "all") as Status;
  const page = Math.max(1, Number(params.page ?? 1) || 1);
  const [search, setSearch] = useState(params.q ?? "");
  useEffect(() => {
    const t = setTimeout(() => {
      if ((params.q ?? "") !== search) setParams({ q: search || null, page: null });
    }, 350);
    return () => clearTimeout(t);
  }, [search, params.q, setParams]);

  const connectors = useAdminQuery<ConnectorHealthDTO[]>("connectors", { timeoutMs: 30_000 });
  const q = useAdminQuery<AdminDocument[]>("documents", { query: { connector: connector || undefined, pageType: pageType || undefined, status: status === "all" ? undefined : status, q: params.q || undefined, page, per_page: PER_PAGE }, refreshMs: 60_000 });
  const total = Number(q.meta?.total ?? 0);
  const connectorIds = useMemo(() => (connectors.data ?? []).map((c) => c.id).sort(), [connectors.data]);

  return (
    <div>
      <AdminPageHeader title="Documents" description={q.data ? `${fmtInt(total)} documents in the URL registry${connector ? ` · ${connector}` : ""}` : "URL registry: every page the crawler knows, with versions and extraction state"} 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 lg:flex-row lg:items-center">
        <Segmented label="Status" value={status} onChange={(v) => setParams({ status: v === "all" ? null : v, page: null })} options={STATUS.map((s) => ({ value: s, label: s === "all" ? "All" : s[0]!.toUpperCase() + s.slice(1) }))} />
        <div className="flex flex-1 flex-col gap-2 sm:flex-row">
          <Select value={connector} onChange={(e) => setParams({ connector: e.target.value || null, page: null })} className="sm:w-[200px]" aria-label="Connector">
            <option value="">All connectors</option>
            {connector && !connectorIds.includes(connector) && <option value={connector}>{connector}</option>}
            {connectorIds.map((id) => (
              <option key={id} value={id}>
                {id}
              </option>
            ))}
          </Select>
          <Select value={pageType} onChange={(e) => setParams({ pageType: e.target.value || null, page: null })} className="sm:w-[190px]" aria-label="Page type">
            <option value="">All page types</option>
            {PAGE_TYPES.map((t) => (
              <option key={t} value={t}>
                {t}
              </option>
            ))}
          </Select>
          <SearchInput size="sm" value={search} onChange={setSearch} placeholder="Search URL or title" wrapperClassName="flex-1" />
        </div>
      </div>

      {q.loading && !q.data ? (
        <SkeletonRows rows={10} />
      ) : !q.data || q.data.length === 0 ? (
        <EmptyState compact title="No documents match" />
      ) : (
        <div className="rounded-sm border border-hair bg-surface px-3">
          <Table className="text-[12.5px]">
            <THead>
              <Tr>
                <Th>URL</Th>
                <Th>Connector</Th>
                <Th>Page type</Th>
                <Th>Lvl</Th>
                <Th numeric>HTTP</Th>
                <Th>Last fetched</Th>
                <Th>Last changed</Th>
                <Th numeric>Changes</Th>
                <Th>Extract</Th>
                <Th numeric>Size</Th>
              </Tr>
            </THead>
            <TBody>
              {q.data.map((d) => (
                <Tr key={d.id} className={cn(d.quarantined && "opacity-70")}>
                  <Td primary label="URL" className="max-w-[420px]">
                    <Link href={`/admin/documents/${encodeURIComponent(d.id)}`} className="block truncate font-mono text-[12px] font-medium text-ink hover:text-accent hover:underline" title={d.url}>
                      {d.url.replace(/^https?:\/\//, "")}
                    </Link>
                    <div className="flex flex-wrap items-center gap-1.5 text-[11.5px] text-ink-3">
                      <span className="truncate">{d.title ?? d.id}</span>
                      {d.quarantined && (
                        <Badge size="xs" tone="warn">
                          quarantined
                        </Badge>
                      )}
                      {d.error && (
                        <span className="truncate text-danger" title={d.error}>
                          {d.error}
                        </span>
                      )}
                    </div>
                  </Td>
                  <Td label="Connector">
                    <Link href={`/admin/connectors/${encodeURIComponent(d.connectorId)}`} className="font-mono text-[12px] text-ink-2 hover:text-accent hover:underline">
                      {d.connectorId}
                    </Link>
                  </Td>
                  <Td label="Page type">
                    <Badge size="xs" mono tone="outline">
                      {d.pageType}
                    </Badge>
                  </Td>
                  <Td label="Level">
                    <LevelBadge level={d.fetchLevel} />
                  </Td>
                  <Td label="HTTP" numeric className={cn(d.statusCode != null && d.statusCode >= 400 && "text-danger")}>
                    {d.statusCode ?? DASH}
                  </Td>
                  <Td label="Last fetched" muted>
                    <RelativeTime iso={d.lastFetched} />
                  </Td>
                  <Td label="Last changed" muted>
                    <RelativeTime iso={d.lastChanged} />
                  </Td>
                  <Td label="Changes" numeric>
                    {fmtInt(d.changeCount)}
                    <span className="text-ink-4"> / {fmtInt(d.fetchCount)}</span>
                  </Td>
                  <Td label="Extract">
                    {d.extractOk == null ? (
                      <span className="text-ink-4">{DASH}</span>
                    ) : d.extractOk ? (
                      <span className="text-ok">
                        ok <span className="figure text-ink-3">{fmtInt(d.extractCount)}</span>
                      </span>
                    ) : (
                      <span className="text-danger">failed{d.errorCount ? <span className="figure"> ×{d.errorCount}</span> : null}</span>
                    )}
                  </Td>
                  <Td label="Size" numeric muted>
                    {fmtBytes(d.sizeBytes)}
                  </Td>
                </Tr>
              ))}
            </TBody>
          </Table>
          <Pager page={page} perPage={PER_PAGE} total={total} onPage={(p) => setParams({ page: p === 1 ? null : p })} />
        </div>
      )}
    </div>
  );
}