import type { ProvenanceDTO } from "@dci/core";
import { ExternalLink } from "lucide-react";
import type { ReactNode } from "react";
import { ConfidenceBadge, EstimateMark, ScopeBadge } from "@/components/ui/badge";
import { SourceBadge } from "@/components/ui/source-badge";
import { cn } from "@/components/ui/cn";
import { ProvenancePopover } from "@/components/ui/popover";
import { EmptyState } from "@/components/ui/states";
import { TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { fieldLabel, valueHint } from "@/lib/field-labels";
import { fmtDate, fmtValue } from "@/lib/format";

/** Provenance rows backing one or more fields (API field names are camelCase; snake_case tolerated). */
export function provFor(items: ProvenanceDTO[] | undefined, ...fields: string[]): ProvenanceDTO[] {
  if (!items?.length) return [];
  const want = new Set(fields.flatMap((f) => [f, f.replace(/[A-Z]/g, (m) => `_${m.toLowerCase()}`), f.replace(/_([a-z])/g, (_, c: string) => c.toUpperCase())]));
  return items.filter((p) => want.has(p.field));
}

export { FIELD_LABEL, fieldLabel } from "@/lib/field-labels";

/** Value + inline provenance popover for the rows backing `fields`. Renders nothing extra when no provenance exists. */
export function WithProvenance({ items, fields, children, className }: { items: ProvenanceDTO[] | undefined; fields: string | string[]; children: ReactNode; className?: string }) {
  const rows = provFor(items, ...(Array.isArray(fields) ? fields : [fields]));
  return (
    <span className={cn("inline-flex items-center gap-1", className)}>
      {children}
      {rows.length > 0 && <ProvenancePopover items={rows} size={12} />}
    </span>
  );
}

/** Full provenance table: field, value, source, first/last observed, confidence, method, link. Stacks to cards < 640 px. */
export function ProvenanceTable({ items, emptyDescription = "No field-level provenance has been published for this record yet." }: { items: ProvenanceDTO[]; emptyDescription?: string }) {
  if (!items.length) return <EmptyState compact title="No provenance rows" description={emptyDescription} />;
  const sorted = [...items].sort((a, b) => fieldLabel(a.field).localeCompare(fieldLabel(b.field)) || (a.lastObserved < b.lastObserved ? 1 : -1));
  return (
    <Table dense>
      <THead>
        <tr>
          <Th>Field</Th>
          <Th>Value</Th>
          <Th>Source</Th>
          <Th className="hidden lg:table-cell">First observed</Th>
          <Th className="hidden lg:table-cell">Last observed</Th>
          <Th>Confidence</Th>
          <Th className="hidden xl:table-cell">Method</Th>
          <Th className="hidden md:table-cell">Link</Th>
        </tr>
      </THead>
      <TBody>
        {sorted.map((p, i) => (
          <Tr key={`${p.field}-${p.sourceId}-${i}`}>
            <Td primary>
              <span className="inline-flex items-center gap-1.5">
                {fieldLabel(p.field)}
                {p.isWinner && (
                  <span className="inline-flex h-[16px] items-center rounded-xs border border-accent/40 bg-accent-soft px-1 text-[9.5px] font-medium uppercase tracking-[0.06em] text-accent-ink" title="Winner — the observation backing the displayed value">
                    shown
                  </span>
                )}
              </span>
            </Td>
            <Td label="Value" className="figure max-w-[220px] text-[12.5px] lg:max-w-[300px]">
              <span className="min-w-0 [overflow-wrap:anywhere]">
                {p.isEstimate && <EstimateMark className="mr-0.5" />}
                {fmtValue(p.value, valueHint(p.field))}
                {p.scope && <ScopeBadge scope={p.scope} className="ml-1.5 align-middle" />}
              </span>
            </Td>
            <Td label="Source">
              <span className="inline-flex min-w-0 flex-wrap items-center gap-1.5 [overflow-wrap:anywhere]">
                <span className="text-ink">{p.sourceName}</span>
                <SourceBadge kind={p.sourceKind} name={p.sourceName} url={p.url} retrievedAt={p.retrievedAt} documentId={p.documentId} />
              </span>
            </Td>
            <Td label="First observed" className="figure hidden text-[12px] text-ink-3 lg:table-cell">
              {fmtDate(p.firstObserved)}
            </Td>
            <Td label="Last observed" className="figure hidden text-[12px] text-ink-3 lg:table-cell">
              {fmtDate(p.lastObserved)}
            </Td>
            <Td label="Confidence">
              <ConfidenceBadge level={p.confidence} size="xs" />
            </Td>
            <Td label="Method" className="figure hidden text-[11.5px] text-ink-3 xl:table-cell">
              {p.method ?? "—"}
            </Td>
            <Td label="Link" className="hidden md:table-cell">
              <a href={p.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-[12px] text-ink-2 hover:text-accent" title={p.url}>
                source <ExternalLink className="size-3" />
              </a>
            </Td>
          </Tr>
        ))}
      </TBody>
    </Table>
  );
}