import { Evidence } from '@/components/evidence/evidence';
import { cn } from '@/lib/cn';
import { fmtAgo } from '@/lib/format';
import type { ProvenanceEntry } from '@/lib/types';
import { TierBadge } from './badges';

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

/**
 * One-line provenance: "Source: docs.claude.com · T1 · observed 3 h ago · high". Server-safe.
 * With `slug` + `property` it appends an "Evidence" trigger that opens the drawer (`components/evidence`).
 */
export function ProvenanceInline({
  p,
  className,
  showConfidence = true,
  slug,
  property,
  value,
  entity,
}: {
  p: ProvenanceEntry;
  className?: string;
  showConfidence?: boolean;
  slug?: string;
  property?: string;
  value?: unknown;
  entity?: { name?: string; entity_type?: string } | null;
}) {
  const name = p.source_name ?? domain(p.url) ?? 'source';
  return (
    <p className={cn('flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[11px] leading-4 text-ink-3', className)}>
      <span>Source:</span>
      {p.url ? (
        <a href={p.url} target="_blank" rel="noopener noreferrer" className="truncate text-ink-2 hover:text-accent hover:underline">
          {name}
        </a>
      ) : (
        <span className="text-ink-2">{name}</span>
      )}
      <span aria-hidden>·</span>
      <TierBadge tier={p.tier} />
      <span aria-hidden>·</span>
      <span title={p.observed_at}>observed {fmtAgo(p.observed_at)}</span>
      {showConfidence && p.confidence && (
        <>
          <span aria-hidden>·</span>
          <span className={cn(p.confidence === 'conflicted' && 'text-danger', p.confidence === 'low' && 'text-warning')}>{p.confidence}</span>
        </>
      )}
      {p.extractor && p.extractor.startsWith('llm') && (
        <>
          <span aria-hidden>·</span>
          <span title="Extracted by the local LLM factory">LLM-extracted</span>
        </>
      )}
      {slug && property && (
        <>
          <span aria-hidden>·</span>
          <Evidence slug={slug} property={property} value={value} unit={p.unit ?? null} fallback={p} entity={entity ?? null} className="text-accent">
            Evidence
          </Evidence>
        </>
      )}
    </p>
  );
}

/** Compact source cell for tables: domain link + tier. */
export function SourceCell({ url, tier, name, observedAt, className }: { url: string | null | undefined; tier?: number | null; name?: string | null; observedAt?: string | null; className?: string }) {
  const label = name ?? domain(url);
  return (
    <span className={cn('inline-flex flex-wrap items-center gap-1.5 text-xs text-ink-3', className)}>
      {url && label ? (
        <a href={url} target="_blank" rel="noopener noreferrer" className="max-w-[16rem] truncate text-ink-2 hover:text-accent hover:underline">
          {label}
        </a>
      ) : label ? (
        <span>{label}</span>
      ) : (
        <span>—</span>
      )}
      {tier !== undefined && <TierBadge tier={tier} />}
      {observedAt && <span title={observedAt}>{fmtAgo(observedAt)}</span>}
    </span>
  );
}