import type { ClaimDTO } from "@dci/core";
import { ExternalLink } from "lucide-react";
import { ConfidenceBadge, EstimateMark, ScopeBadge, SemanticsLabel, TierMark } from "@/components/ui/badge";
import { SourceBadge } from "@/components/ui/source-badge";
import { TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { fmtDate, fmtValue } from "@/lib/format";
import { CLAIM_STATUS_LABEL, isSiteScopeLabel } from "@/lib/labels";
import { Evidence } from "./evidence-context";

/**
 * Every capacity / investment claim on a record: predicate · scope · value · source · published · confidence · tier.
 * Site-scoped claims come first; non-site claims (portfolio, company, metro…) are grouped under
 * "Figures not assigned to this site" so they are never read as the record's own MW.
 */
export function ClaimsTable({ claims, kind = "capacity", emptyNote }: { claims: ClaimDTO[]; kind?: "capacity" | "investment" | "all"; emptyNote?: string }) {
  const rows = claims.filter((c) => (kind === "all" ? true : kind === "capacity" ? /_mw$/.test(c.predicate) : /_usd$/.test(c.predicate)));
  if (!rows.length) return <p className="rounded-sm border border-dashed border-hair-2 px-3 py-2.5 text-[12.5px] text-ink-3">{emptyNote ?? `No ${kind === "all" ? "" : `${kind} `}claim has been extracted for this record yet — the figures above come from structured source fields (see Source evidence).`}</p>;
  const site = rows.filter((c) => isSiteScopeLabel(c.scope));
  const other = rows.filter((c) => !isSiteScopeLabel(c.scope));
  return (
    <div className="flex flex-col gap-4">
      {site.length > 0 && <Rows rows={site} />}
      {other.length > 0 && (
        <div>
          <div className="mb-1.5 flex flex-wrap items-baseline gap-x-2">
            <h3 className="text-[13px] font-semibold text-ink">Figures not assigned to this site</h3>
            <span className="text-[11.5px] text-ink-3">portfolio, company, metro, country or unknown scope — shown as evidence, never summed into this record</span>
          </div>
          <Rows rows={other} />
        </div>
      )}
    </div>
  );
}

function Rows({ rows }: { rows: ClaimDTO[] }) {
  const sorted = [...rows].sort((a, b) => Number(b.isWinner) - Number(a.isWinner) || a.predicate.localeCompare(b.predicate) || ((a.publishedAt ?? a.retrievedAt) < (b.publishedAt ?? b.retrievedAt) ? 1 : -1));
  return (
    <Table dense>
      <THead>
        <tr>
          <Th>Figure</Th>
          <Th>Scope</Th>
          <Th numeric>Value</Th>
          <Th>Source</Th>
          <Th className="hidden lg:table-cell">Published</Th>
          <Th>Confidence</Th>
          <Th className="hidden md:table-cell">Tier</Th>
          <Th className="hidden md:table-cell">Status</Th>
        </tr>
      </THead>
      <TBody>
        {sorted.map((c) => (
          <Tr key={c.id} className={c.status !== "current" ? "text-ink-3" : undefined}>
            <Td primary>
              <span className="inline-flex flex-wrap items-center gap-1.5">
                <SemanticsLabel semantics={c.predicate} className="text-[12.5px] text-ink" />
                {c.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">shown</span>}
              </span>
            </Td>
            <Td label="Scope">
              <ScopeBadge scope={c.scope} />
            </Td>
            <Td label="Value" numeric lead>
              <Evidence field={c.predicate} label={c.label}>
                <span className="figure">
                  {c.isEstimate && <EstimateMark className="mr-0.5" />}
                  {c.value !== null ? fmtValue(c.value, c.unit === "USD" ? "usd" : "mw") : (c.valueText ?? "—")}
                </span>
              </Evidence>
            </Td>
            <Td label="Source">
              <span className="inline-flex flex-wrap items-center gap-1.5">
                <SourceBadge kind={c.sourceKind} name={c.sourceName} url={c.url} publishedAt={c.publishedAt} retrievedAt={c.retrievedAt} documentId={c.documentId} />
                <a href={c.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-[12px] text-ink-2 hover:text-accent">
                  {c.sourceName} <ExternalLink className="size-3" />
                </a>
              </span>
            </Td>
            <Td label="Published" className="figure hidden text-[12px] text-ink-3 lg:table-cell">
              {c.publishedAt ? fmtDate(c.publishedAt) : "—"}
            </Td>
            <Td label="Confidence">
              <ConfidenceBadge level={c.confidence} size="xs" />
            </Td>
            <Td label="Tier" className="hidden md:table-cell">
              <TierMark tier={c.authorityTier} />
            </Td>
            <Td label="Status" className="hidden text-[12px] md:table-cell">
              {CLAIM_STATUS_LABEL[c.status]}
            </Td>
          </Tr>
        ))}
      </TBody>
    </Table>
  );
}