'use client';
import { ExternalLink, History, TriangleAlert } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { ConfidenceBadge, TierBadge } from '@/components/ui/badges';
import { Sheet } from '@/components/ui/sheet';
import { ClientApiError, clientApi } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { DASH, fmtAgo, fmtDateTime, fmtValue, hostOf } from '@/lib/format';
import { propertyLabel, routes, TIER_LABELS } from '@/lib/site';
import type { Claim, ProvenanceDetail } from '@/lib/types';
import { type EvidenceTarget, useEvidence } from './evidence-context';

type State = { status: 'loading' | 'ready' | 'none'; detail: ProvenanceDetail | null; source: 'api' | 'history' | 'fallback' | null };

/**
 * Right-side panel (≥ lg) / bottom sheet (< lg) explaining one displayed value: VALUE · SOURCE · TIER · OBSERVED · EXTRACTOR ·
 * CONFIDENCE · VALID SINCE · links (View source · View history · View conflicts · Claim id).
 * Data: `GET /entities/{slug}/provenance/{property}` (1.1) → else the property's claim history (exists today) → else the
 * inline `fallback` the trigger passed. Mount once in the root layout, inside `EvidenceProvider`.
 */
export function EvidenceDrawer() {
  const { target, close } = useEvidence();
  const [state, setState] = useState<State>({ status: 'none', detail: null, source: null });

  useEffect(() => {
    if (!target) return;
    const ctrl = new AbortController();
    setState({ status: 'loading', detail: fromFallback(target), source: target.fallback ? 'fallback' : null });
    (async () => {
      try {
        const d = await clientApi.provenance(target.slug, target.property, ctrl.signal);
        setState({ status: 'ready', detail: { ...fromFallback(target), ...d, property: d.property ?? target.property }, source: 'api' });
        return;
      } catch (e) {
        if ((e as Error).name === 'AbortError') return;
        if (!(e instanceof ClientApiError) || (e.status !== 404 && e.status !== 405)) {
          setState((s) => ({ ...s, status: 'ready' }));
          return;
        }
      }
      try {
        const h = await clientApi.history(target.slug, target.property, ctrl.signal);
        setState({ status: 'ready', detail: fromHistory(target, h.items ?? []), source: 'history' });
      } catch (e) {
        if ((e as Error).name === 'AbortError') return;
        setState((s) => ({ ...s, status: 'ready' }));
      }
    })();
    return () => ctrl.abort();
  }, [target]);

  const d = state.detail;
  const open = target !== null;
  const entityRef = target ? { entity_type: target.entity?.entity_type ?? 'model', slug: target.slug } : null;
  const conflicts = d?.conflicts ?? [];
  const sourceLabel = d?.source_name ?? d?.domain ?? hostOf(d?.url) ?? null;

  return (
    <Sheet open={open} onClose={close} eyebrow="Evidence" title={target ? `${propertyLabel(target.property)}${target.entity?.name ? ` · ${target.entity.name}` : ''}` : undefined} labelledBy="evidence-title">
      {target && (
        <div className="space-y-4 text-sm" data-evidence-drawer>
          <div>
            <p className="eyebrow">Value</p>
            <p className={cn('mt-1 text-[22px] font-semibold leading-tight tracking-tight text-ink', typeof (d?.value ?? target.value) === 'number' && 'tnum')}>
              {target.display ?? fmtValue(d?.value ?? target.value, target.property)}
              {(d?.unit ?? target.unit) && !/tokens|GB|W|\$|%/.test(target.display ?? '') && <span className="ml-1.5 text-sm font-normal text-ink-3">{d?.unit ?? target.unit}</span>}
            </p>
          </div>

          {state.status === 'loading' && !d && <p className="text-xs text-ink-3">Loading evidence…</p>}
          {state.status === 'ready' && !d && (
            <p className="border border-dashed border-rule-strong px-3 py-3 text-xs text-ink-3" role="status">
              No provenance recorded for this value. Every fact on AI Atlas should carry one — this is a data gap, not a hidden source.
            </p>
          )}

          {d && (
            <dl className="kv [&>div]:grid-cols-[6.5rem_minmax(0,1fr)]">
              <Row k="Source">
                {d.url ? (
                  <a href={d.url} target="_blank" rel="noopener noreferrer" className="link inline-flex items-center gap-1 break-all">
                    {sourceLabel ?? d.url} <ExternalLink className="size-3 shrink-0" aria-hidden />
                  </a>
                ) : (
                  <span>{sourceLabel ?? DASH}</span>
                )}
                {d.domain && sourceLabel !== d.domain && <span className="mono ml-1.5 text-[11px] text-ink-3">{d.domain}</span>}
              </Row>
              <Row k="Tier">
                <TierBadge tier={d.tier} withLabel /> {d.tier ? <span className="text-xs text-ink-3">{tierHint(d.tier)}</span> : null}
              </Row>
              <Row k="Observed">
                <span title={d.observed_at ?? undefined}>{d.observed_at ? `${fmtAgo(d.observed_at)} · ${fmtDateTime(d.observed_at)}` : DASH}</span>
              </Row>
              <Row k="Extractor">
                <span className="mono text-xs">{d.extractor ?? DASH}</span>
                {d.extractor?.startsWith('llm') && <span className="ml-1.5 text-xs text-ink-3">local LLM factory · claims one tier lower</span>}
              </Row>
              <Row k="Confidence">
                <ConfidenceBadge confidence={d.confidence} /> {!d.confidence && DASH}
              </Row>
              <Row k="Valid since">
                <span title={d.valid_from ?? undefined}>{d.valid_from ? fmtDateTime(d.valid_from) : DASH}</span>
                {d.valid_to && <span className="ml-1.5 text-xs text-warning">until {fmtDateTime(d.valid_to)}</span>}
              </Row>
              {d.status && d.status !== 'current' && (
                <Row k="Status">
                  <span className={cn('text-xs uppercase tracking-wide', d.status === 'conflicting' ? 'text-danger' : 'text-ink-2')}>{d.status}</span>
                </Row>
              )}
            </dl>
          )}

          {conflicts.length > 0 && (
            <div className="border-l-2 border-danger pl-3">
              <p className="flex items-center gap-1.5 text-xs font-medium text-danger">
                <TriangleAlert className="size-3.5" aria-hidden /> {conflicts.length} conflicting {conflicts.length === 1 ? 'claim' : 'claims'} — stored side by side, never averaged
              </p>
              <ul className="mt-1.5 space-y-1.5">
                {conflicts.slice(0, 5).map((c) => (
                  <li key={c.id} className="text-xs text-ink-2">
                    <span className="tnum font-medium text-ink">{fmtValue(c.value, c.property)}</span> · <TierBadge tier={c.tier} /> ·{' '}
                    {c.source_url ? (
                      <a href={c.source_url} target="_blank" rel="noopener noreferrer" className="link">
                        {c.source_name ?? hostOf(c.source_url)}
                      </a>
                    ) : (
                      c.source_name ?? 'source'
                    )}{' '}
                    · {fmtAgo(c.observed_at)}
                  </li>
                ))}
              </ul>
            </div>
          )}

          <div className="flex flex-wrap gap-x-4 gap-y-1.5 border-t border-rule pt-3 text-xs">
            {d?.url && (
              <a href={d.url} target="_blank" rel="noopener noreferrer" className="link inline-flex items-center gap-1">
                View source <ExternalLink className="size-3" aria-hidden />
              </a>
            )}
            {entityRef && (
              <Link href={routes.entityHistory(entityRef, target.property)} onClick={close} className="link inline-flex items-center gap-1">
                <History className="size-3" aria-hidden /> View history
              </Link>
            )}
            {conflicts.length > 0 && entityRef && (
              <Link href={routes.entityHistory(entityRef, target.property)} onClick={close} className="link text-danger">
                View conflicts
              </Link>
            )}
            <Link href={routes.methodology()} onClick={close} className="text-ink-3 hover:text-ink">
              Methodology
            </Link>
          </div>
          {d?.claim_id && (
            <p className="mono break-all text-[11px] text-ink-3">
              claim {d.claim_id}
              {d.snapshot_id && <> · snapshot {d.snapshot_id}</>}
            </p>
          )}
          {state.source && state.source !== 'api' && <p className="text-[11px] text-ink-3">{state.source === 'history' ? 'From the claim history endpoint (the field-level provenance endpoint is not live yet).' : 'From the inline provenance shipped with the page.'}</p>}
        </div>
      )}
    </Sheet>
  );
}

function Row({ k, children }: { k: string; children: React.ReactNode }) {
  return (
    <div>
      <dt>{k}</dt>
      <dd className="text-ink">{children}</dd>
    </div>
  );
}

function tierHint(t: number): string {
  const n = Math.min(4, Math.max(1, Math.round(t)));
  return TIER_LABELS[n] ? `— ${TIER_LABELS[n]?.toLowerCase()} source` : '';
}

function fromFallback(t: EvidenceTarget): ProvenanceDetail | null {
  const f = t.fallback;
  if (!f) return null;
  return {
    slug: t.slug,
    property: t.property,
    value: t.value,
    unit: f.unit ?? t.unit ?? null,
    source_id: f.source_id,
    source_name: f.source_name ?? null,
    domain: hostOf(f.url),
    url: f.url,
    tier: f.tier,
    confidence: f.confidence,
    extractor: f.extractor,
    observed_at: f.observed_at,
    valid_from: null,
    conflicts: [],
  };
}

function fromHistory(t: EvidenceTarget, items: Claim[]): ProvenanceDetail | null {
  const current = items.find((c) => c.status === 'current') ?? items[0];
  const base = fromFallback(t);
  if (!current) return base;
  return {
    ...(base ?? { slug: t.slug, property: t.property, value: t.value, tier: null }),
    value: current.value ?? t.value,
    unit: current.unit ?? base?.unit ?? null,
    claim_id: current.id,
    source_name: current.source_name ?? base?.source_name ?? null,
    domain: hostOf(current.source_url) ?? base?.domain ?? null,
    url: current.source_url ?? base?.url ?? null,
    tier: current.tier,
    confidence: current.confidence,
    extractor: current.extractor,
    observed_at: current.observed_at,
    valid_from: current.valid_from,
    valid_to: current.valid_to,
    status: current.status,
    conflicts: items.filter((c) => c.status === 'conflicting'),
    history_count: items.length,
  };
}