"use client";

import type { ClaimDTO, HistoryPoint, ProvenanceDTO } from "@dci/core";
import { ArrowRight, ExternalLink, History as HistoryIcon, Quote } from "lucide-react";
import { useMemo, useState, type ReactNode } from "react";
import { ConfidenceBadge, EstimateMark, ScopeBadge, SemanticsLabel, TierMark } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/components/ui/cn";
import { Sheet } from "@/components/ui/sheet";
import { SourceBadge } from "@/components/ui/source-badge";
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";
import { fieldLabel, valueHint } from "@/lib/field-labels";
import { fmtDate, fmtValue } from "@/lib/format";
import { CLAIM_STATUS_LABEL, CONFIDENCE_LABEL, EXTRACTION_LABEL, extractionKind, isSiteScopeLabel } from "@/lib/labels";
import { routes } from "@/lib/routes";
import { fieldAliases, useEvidence } from "./evidence-context";

/* ------------------------------------------------------------------------------------------
   Evidence drawer (§24, §80): right-side sheet on desktop, bottom sheet on mobile. Shows every
   claim + provenance observation behind one field with source, dates, confidence, authority tier,
   extraction method and the supporting sentence; the HISTORY tab lists dated value changes with
   old → new, the source and a WHY? toggle revealing the evidence behind each change.
   ------------------------------------------------------------------------------------------ */

function hostOf(url: string | null | undefined): string {
  if (!url) return "";
  try {
    return new URL(url).host.replace(/^www\./, "");
  } catch {
    return url;
  }
}

/** Highlight the figure inside the supporting sentence (first numeric token matching the value, else nothing). */
function Quoted({ text, value }: { text: string; value: number | string | null }) {
  const parts = useMemo(() => {
    if (value === null || value === undefined) return [text];
    const v = typeof value === "number" ? value : Number(String(value).replace(/[^\d.]/g, ""));
    if (!Number.isFinite(v)) return [text];
    const variants = new Set<string>([String(v), v.toLocaleString("en-US"), v.toFixed(1), v.toFixed(0), (v / 1000).toString(), (v / 1e6).toString(), (v / 1e9).toString()]);
    for (const cand of Array.from(variants).sort((a, b) => b.length - a.length)) {
      const i = text.indexOf(cand);
      if (i >= 0 && cand.length > 0) return [text.slice(0, i), text.slice(i, i + cand.length), text.slice(i + cand.length)];
    }
    return [text];
  }, [text, value]);
  return (
    <blockquote className="relative rounded-sm border border-hair bg-surface-2/60 px-3 py-2 text-[12.5px] leading-relaxed text-ink-2">
      <Quote className="absolute right-2 top-2 size-3 text-ink-4" aria-hidden />
      {parts.length === 3 ? (
        <>
          {parts[0]}
          <mark className="rounded-[1px] bg-accent/20 px-0.5 text-ink">{parts[1]}</mark>
          {parts[2]}
        </>
      ) : (
        parts[0]
      )}
    </blockquote>
  );
}

function Row({ k, v }: { k: string; v: ReactNode }) {
  return (
    <div className="grid grid-cols-[110px_minmax(0,1fr)] gap-x-3 border-b border-hair py-1.5 text-[12.5px] last:border-b-0">
      <dt className="text-ink-3">{k}</dt>
      <dd className="min-w-0 break-words text-ink">{v}</dd>
    </div>
  );
}

function ClaimCard({ c, hint }: { c: ClaimDTO; hint: ReturnType<typeof valueHint> }) {
  const method = extractionKind(c.parserName);
  const nonSite = !isSiteScopeLabel(c.scope);
  return (
    <article className={cn("rounded-sm border px-3 py-2.5", c.isWinner ? "border-accent/40" : "border-hair", c.status !== "current" && "opacity-80")} aria-label={`${c.label} claim from ${c.sourceName}`}>
      <div className="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} />
        <ScopeBadge scope={c.scope} />
        <SemanticsLabel semantics={c.predicate} />
        <span className="ml-auto inline-flex items-center gap-1.5">
          {c.isWinner && <span className="inline-flex h-[18px] items-center rounded-xs border border-accent/40 bg-accent-soft px-1.5 text-[10px] font-medium uppercase tracking-[0.06em] text-accent-ink">shown</span>}
          {c.status !== "current" && <span className="inline-flex h-[18px] items-center rounded-xs border border-hair-2 px-1.5 text-[10px] uppercase tracking-[0.06em] text-ink-3">{CLAIM_STATUS_LABEL[c.status]}</span>}
        </span>
      </div>
      <div className="mt-2 flex items-baseline gap-2">
        <span className="figure text-[18px] font-medium text-ink">
          {c.isEstimate && <EstimateMark className="mr-0.5 text-[13px]" />}
          {c.value !== null ? fmtValue(c.value, hint ?? (c.unit === "MW" ? "mw" : c.unit === "USD" ? "usd" : undefined)) : (c.valueText ?? "—")}
        </span>
        {c.unit && c.value !== null && !/MW|USD/.test(c.unit) && <span className="text-[12px] text-ink-3">{c.unit}</span>}
      </div>
      {nonSite && <p className="mt-1 text-[11.5px] text-ink-3">Not assigned to this site: the sentence describes a {c.scope === "unknown" ? "figure of unknown scope" : `${c.scope}-level figure`}{c.scopeReason ? ` (${c.scopeReason})` : ""}. Stored as evidence, never summed.</p>}
      {c.evidenceText && (
        <div className="mt-2">
          <Quoted text={c.evidenceText} value={c.value} />
        </div>
      )}
      <dl className="mt-2">
        <Row k="Document" v={<a href={c.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-ink hover:text-accent">{hostOf(c.url)} <ExternalLink className="size-3" /></a>} />
        <Row k="Published" v={<span className="figure">{c.publishedAt ? fmtDate(c.publishedAt) : "not stated"}</span>} />
        <Row k="Retrieved" v={<span className="figure">{fmtDate(c.retrievedAt)}</span>} />
        <Row k="Confidence" v={<ConfidenceBadge level={c.confidence} short={false} size="xs" />} />
        <Row k="Authority" v={<span className="inline-flex items-center gap-1.5"><TierMark tier={c.authorityTier} /> <span className="text-[11.5px] text-ink-3">for this field</span></span>} />
        <Row k="Extraction" v={<span>{EXTRACTION_LABEL[method]}{c.parserName && <span className="figure ml-1.5 text-[11px] text-ink-3">{c.parserName}{c.parserVersion ? ` v${c.parserVersion}` : ""}</span>}</span>} />
        {c.rejectionReason && <Row k="Reason" v={<span className="text-ink-2">{c.rejectionReason}</span>} />}
      </dl>
      <div className="mt-2 flex items-center gap-2">
        <Button href={c.url} external size="xs" variant="secondary">
          View source <ExternalLink className="size-3" />
        </Button>
        {c.documentId && (
          <Button href={`/admin/documents/${encodeURIComponent(c.documentId)}`} size="xs" variant="ghost" className="text-ink-3">
            Archived document
          </Button>
        )}
      </div>
    </article>
  );
}

function ProvenanceCard({ p, hint }: { p: ProvenanceDTO; hint: ReturnType<typeof valueHint> }) {
  const method = extractionKind(p.method);
  return (
    <article className={cn("rounded-sm border px-3 py-2.5", p.isWinner ? "border-accent/40" : "border-hair")} aria-label={`${fieldLabel(p.field)} observed on ${p.sourceName}`}>
      <div className="flex flex-wrap items-center gap-1.5">
        <SourceBadge kind={p.sourceKind} name={p.sourceName} url={p.url} retrievedAt={p.retrievedAt} documentId={p.documentId} />
        {p.scope && <ScopeBadge scope={p.scope} />}
        {p.isWinner && <span className="ml-auto inline-flex h-[18px] items-center rounded-xs border border-accent/40 bg-accent-soft px-1.5 text-[10px] font-medium uppercase tracking-[0.06em] text-accent-ink">shown</span>}
      </div>
      <div className="mt-2 figure text-[16px] font-medium text-ink [overflow-wrap:anywhere]">
        {p.isEstimate && <EstimateMark className="mr-0.5 text-[12px]" />}
        {fmtValue(p.value, hint)}
      </div>
      <dl className="mt-2">
        <Row k="Source" v={<span>{p.sourceName} <span className="text-ink-3">· {hostOf(p.url)}</span></span>} />
        <Row k="First observed" v={<span className="figure">{fmtDate(p.firstObserved)}</span>} />
        <Row k="Last observed" v={<span className="figure">{fmtDate(p.lastObserved)}</span>} />
        <Row k="Retrieved" v={<span className="figure">{fmtDate(p.retrievedAt)}</span>} />
        <Row k="Confidence" v={<ConfidenceBadge level={p.confidence} short={false} size="xs" />} />
        <Row k="Extraction" v={<span>{EXTRACTION_LABEL[method]}{p.method && <span className="figure ml-1.5 text-[11px] text-ink-3">{p.method}</span>}</span>} />
      </dl>
      <div className="mt-2">
        <Button href={p.url} external size="xs" variant="secondary">
          View source <ExternalLink className="size-3" />
        </Button>
      </div>
    </article>
  );
}

function HistoryList({ points, claims, hint }: { points: HistoryPoint[]; claims: ClaimDTO[]; hint: ReturnType<typeof valueHint> }) {
  const [why, setWhy] = useState<number | null>(null);
  if (!points.length) return <p className="rounded-sm border border-dashed border-hair-2 px-3 py-3 text-[12.5px] text-ink-3">No dated history for this field yet — the value has been observed once. Every future change (old → new, source, evidence) will be listed here.</p>;
  return (
    <ol className="relative ml-1.5 border-l border-hair">
      {points.map((h, i) => {
        const claim = h.claimId ? claims.find((c) => c.id === h.claimId) : undefined;
        const open = why === i;
        return (
          <li key={`${h.date}-${i}`} className="relative pb-3 pl-4 last:pb-0">
            <span aria-hidden className={cn("absolute -left-[4.5px] top-[6px] size-2 rounded-full ring-2 ring-surface", h.kind === "changed" ? "bg-accent" : h.kind === "claim" ? "bg-ink-3" : "bg-ink-4")} />
            <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
              <time className="figure text-[11.5px] text-ink-3" dateTime={h.date}>
                {fmtDate(h.date)}
              </time>
              <span className="text-[11px] uppercase tracking-[0.06em] text-ink-4">{h.kind}</span>
            </div>
            <div className="figure mt-0.5 inline-flex flex-wrap items-center gap-1.5 text-[13px]">
              {h.oldValue !== undefined && h.oldValue !== null && (
                <>
                  <span className="text-ink-3 line-through decoration-ink-4">{fmtValue(h.oldValue, hint)}</span>
                  <ArrowRight className="size-3 text-ink-4" aria-label="changed to" />
                </>
              )}
              <span className="font-medium text-ink">{fmtValue(h.value, hint)}</span>
            </div>
            <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11.5px] text-ink-3">
              {h.sourceKind && <SourceBadge kind={h.sourceKind} name={h.sourceName} url={h.url} />}
              {h.sourceName && <span>{h.sourceName}</span>}
              {h.url && (
                <a href={h.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 hover:text-accent">
                  source <ExternalLink className="size-3" />
                </a>
              )}
              <button type="button" onClick={() => setWhy(open ? null : i)} aria-expanded={open} className="ml-auto inline-flex h-7 items-center rounded-xs border border-hair-2 px-1.5 text-[10.5px] font-medium uppercase tracking-[0.06em] text-ink-2 hover:border-ink hover:text-ink">
                Why?
              </button>
            </div>
            {open && (
              <div className="mt-2 animate-fade-in">
                {claim ? (
                  <ClaimCard c={claim} hint={hint} />
                ) : (
                  <div className="rounded-sm border border-hair px-3 py-2 text-[12.5px] text-ink-2">
                    {h.kind === "changed" ? "Detected as a change between two observations of the same source page." : h.kind === "claim" ? "Recorded as a claim from the document linked above." : "Observed value on the linked source page (no sentence-level evidence recorded for this observation)."}
                    {h.url && (
                      <div className="mt-1.5">
                        <Button href={h.url} external size="xs" variant="secondary">
                          View source <ExternalLink className="size-3" />
                        </Button>
                      </div>
                    )}
                  </div>
                )}
              </div>
            )}
          </li>
        );
      })}
    </ol>
  );
}

export function EvidenceDrawer() {
  const ctx = useEvidence();
  const t = ctx?.target ?? null;
  const [tab, setTab] = useState<string>("evidence");
  const [lastTarget, setLastTarget] = useState<typeof t>(null);
  if (t !== lastTarget) {
    setLastTarget(t);
    if (t) setTab(t.mode);
  }
  const aliases = useMemo(() => new Set(t ? t.fields.flatMap(fieldAliases) : []), [t]);
  const claims = useMemo(() => (ctx && t ? ctx.claims.filter((c) => aliases.has(c.predicate)).sort((a, b) => Number(b.isWinner) - Number(a.isWinner) || (a.status === "current" ? -1 : 1)) : []), [ctx, t, aliases]);
  const prov = useMemo(() => (ctx && t ? ctx.provenance.filter((p) => aliases.has(p.field)).sort((a, b) => Number(!!b.isWinner) - Number(!!a.isWinner) || (a.lastObserved < b.lastObserved ? 1 : -1)) : []), [ctx, t, aliases]);
  const history = useMemo(() => (ctx && t ? ctx.history.filter((h) => aliases.has(h.field) || (h.predicate ? aliases.has(h.predicate) : false)).sort((a, b) => (a.date < b.date ? 1 : -1)) : []), [ctx, t, aliases]);
  if (!ctx) return null;
  const hint = t ? valueHint(t.field) : undefined;
  const winner = claims.find((c) => c.isWinner) ?? null;
  const winnerProv = prov.find((p) => p.isWinner) ?? prov[0] ?? null;
  const display = t?.display ?? (winner ? fmtValue(winner.value ?? winner.valueText, hint) : winnerProv ? fmtValue(winnerProv.value, hint) : "—");
  const sources = new Set([...claims.map((c) => c.sourceId), ...prov.map((p) => p.sourceId)]).size;

  return (
    <Sheet open={!!t} onClose={ctx.close} title={t ? `${t.label}` : undefined} description={t ? `${ctx.entityName} · ${sources} ${sources === 1 ? "source" : "sources"}` : undefined} width={440} heightVh={78} side="right">
      {t && (
        <div className="flex flex-col gap-3">
          <div className="flex flex-wrap items-end gap-x-3 gap-y-1 border-b border-hair pb-3">
            <div className="figure text-[26px] font-medium leading-none tracking-[-0.02em] text-ink">{display}</div>
            <div className="flex flex-wrap items-center gap-1.5 pb-0.5">
              {winner ? (
                <>
                  <SemanticsLabel semantics={winner.predicate} />
                  <ScopeBadge scope={winner.scope} />
                </>
              ) : winnerProv?.scope ? (
                <ScopeBadge scope={winnerProv.scope} />
              ) : null}
              {(winner ?? winnerProv) && <ConfidenceBadge level={(winner ?? winnerProv)!.confidence} size="xs" />}
            </div>
            {display === "—" && <p className="w-full text-[12px] text-ink-3">Not published by any indexed source. Nothing is imputed.</p>}
          </div>

          <Tabs value={tab} onValueChange={setTab}>
            <TabList label="Evidence views">
              <Tab value="evidence" count={claims.length + prov.length}>
                Evidence
              </Tab>
              <Tab value="history" count={history.length}>
                <HistoryIcon className="size-3.5" aria-hidden /> History
              </Tab>
            </TabList>
            <TabPanel value="evidence">
              {claims.length === 0 && prov.length === 0 ? (
                <p className="rounded-sm border border-dashed border-hair-2 px-3 py-3 text-[12.5px] text-ink-3">No source has published this field yet. When a document does, its sentence, date and authority tier appear here.</p>
              ) : (
                <div className="flex flex-col gap-2.5">
                  {claims.map((c) => (
                    <ClaimCard key={c.id} c={c} hint={hint} />
                  ))}
                  {prov.length > 0 && claims.length > 0 && <div className="label-caps pt-1">Other observations</div>}
                  {prov.map((p, i) => (
                    <ProvenanceCard key={`${p.sourceId}-${p.field}-${i}`} p={p} hint={hint} />
                  ))}
                </div>
              )}
              <p className="mt-3 text-[11px] text-ink-4">
                {(winner ?? winnerProv) ? CONFIDENCE_LABEL[(winner ?? winnerProv)!.confidence] : "Confidence"} is computed from the source kind, the number of independent primary sources and the extraction method.{" "}
                <a href={`${routes.methodology()}#confidence`} className="underline decoration-hair-2 hover:text-ink">
                  Methodology
                </a>
              </p>
            </TabPanel>
            <TabPanel value="history">
              <HistoryList points={history} claims={ctx.claims} hint={hint} />
            </TabPanel>
          </Tabs>
        </div>
      )}
    </Sheet>
  );
}