import { ExternalLink } from 'lucide-react';
import Link from 'next/link';
import { ConfidenceBadge, OriginBadge, StatusBadge } from '@/components/ui/badges';
import { KV, Row } from '@/components/ui/key-value';
import { fmtDateTime, pathOf } from '@/lib/format';
import { routes, SURFACE_LABELS } from '@/lib/site';
import type { Event, EventSource } from '@/lib/types';

/**
 * Evidence block shared by the drawer and `/events/[id]`: the careful-language contract (spec §165–171).
 * Every source is listed with its detection time; old/new values are shown verbatim; LLM origin shows model + prompt.
 */
export function EventEvidence({ event, sources, compact = false }: { event: Event; sources: EventSource[] | undefined; compact?: boolean }) {
  const list = sources && sources.length ? sources : event.source_url ? [{ source_url: event.source_url, surface: event.surface, detected_at: event.detected_at, kind: 'primary', sensor_id: event.sensor_id }] : [];
  const llm = event.origin === 'llm' || event.origin === 'hybrid';
  return (
    <div className="space-y-4 text-sm">
      {event.status !== 'active' && (
        <p className="border-l-2 border-danger pl-3 text-xs text-danger" role="status">
          {event.status === 'retracted' ? 'This event was retracted after review. It is kept for auditability and is not counted in metrics.' : event.status === 'duplicate' ? 'This event was merged into another canonical event.' : 'This event is awaiting human review.'}
        </p>
      )}
      {(event.old_value || event.new_value) && (
        <div className="grid gap-2 sm:grid-cols-2">
          <div className="min-w-0 border border-rule p-2.5">
            <p className="eyebrow">Before</p>
            <p className="mt-1 break-words text-[13px] text-ink-2">{event.old_value ?? <span className="text-ink-3">not previously observed</span>}</p>
          </div>
          <div className="min-w-0 border border-rule p-2.5">
            <p className="eyebrow">After</p>
            <p className="mt-1 break-words text-[13px] text-ink">{event.new_value ?? <span className="text-ink-3">no longer observed</span>}</p>
          </div>
        </div>
      )}
      <KV className={compact ? '[&>div]:grid-cols-[6.5rem_minmax(0,1fr)]' : undefined}>
        <Row k="Confidence">
          <ConfidenceBadge label={event.confidence_label} value={event.confidence} withValue />
        </Row>
        <Row k="Importance">
          <span className="tnum">{Math.round(event.importance > 1 ? event.importance : event.importance * 100)} / 100</span>
        </Row>
        <Row k="Detected">
          <span className="tnum">{fmtDateTime(event.detected_at)}</span>
        </Row>
        {event.effective_at && (
          <Row k="Effective">
            <span className="tnum">{fmtDateTime(event.effective_at)}</span>
          </Row>
        )}
        {event.published_at && (
          <Row k="Published">
            <span className="tnum">{fmtDateTime(event.published_at)}</span>
          </Row>
        )}
        {event.surface && <Row k="Surface">{SURFACE_LABELS[event.surface] ?? event.surface}</Row>}
        <Row k="Origin">
          <OriginBadge origin={event.origin} model={event.model_name} prompt={event.prompt_version} />
          {llm && (
            <span className="ml-2 text-xs text-ink-3">
              {event.model_name ?? 'model'}
              {event.prompt_version ? ` · prompt ${event.prompt_version}` : ''} — LLM-enriched interpretation of a deterministic change
            </span>
          )}
        </Row>
        {event.status !== 'active' && (
          <Row k="Status">
            <StatusBadge status={event.status} />
          </Row>
        )}
        {event.tags.length > 0 && (
          <Row k="Tags">
            <span className="flex flex-wrap gap-1">
              {[...new Set(event.tags)].map((t) => (
                <span key={t} className="mono rounded-[3px] bg-surface-2 px-1 text-[11px] text-ink-2">
                  {t}
                </span>
              ))}
            </span>
          </Row>
        )}
      </KV>

      <div>
        <p className="eyebrow">
          Sources <span className="tnum normal-case tracking-normal text-ink-3">({list.length})</span>
        </p>
        {list.length === 0 ? (
          <p className="mt-1 text-xs text-ink-3">The monitored source for this event is not available any more; the observation is kept.</p>
        ) : (
          <ul className="mt-1.5 divide-y divide-rule border-y border-rule">
            {list.map((s, i) => (
              <li key={`${s.source_url}-${i}`} className="flex flex-wrap items-baseline gap-x-3 gap-y-0.5 py-2 text-[13px]">
                <a href={s.source_url} target="_blank" rel="noopener noreferrer" className="link inline-flex min-w-0 max-w-full items-center gap-1 break-all">
                  {pathOf(s.source_url)} <ExternalLink className="size-3 shrink-0" aria-hidden />
                </a>
                <span className="text-xs text-ink-3">
                  {s.surface ? (SURFACE_LABELS[s.surface] ?? s.surface) : s.kind} · detected <span className="tnum">{fmtDateTime(s.detected_at)}</span>
                </span>
                {s.sensor_id && (
                  <Link href={routes.sensor(s.sensor_id)} className="mono text-[11px] text-ink-3 hover:text-accent">
                    sensor {s.sensor_id.slice(0, 12)}…
                  </Link>
                )}
              </li>
            ))}
          </ul>
        )}
      </div>

      <div className="flex flex-wrap gap-x-4 gap-y-1.5 text-xs">
        {event.change_id && (
          <Link href={routes.change(event.change_id)} className="link">
            View block-level change diff →
          </Link>
        )}
        {event.sensor_id && (
          <Link href={routes.sensor(event.sensor_id)} className="link">
            Sensor
          </Link>
        )}
        <Link href={routes.company(event.company.slug, 'timeline')} className="link">
          Company timeline
        </Link>
      </div>
      <p className="mono break-all text-[11px] text-ink-3">
        event {event.id}
        {event.cluster_id ? ` · cluster ${event.cluster_id}` : ''}
        {event.change_id ? ` · change ${event.change_id}` : ''}
        {event.sensor_id ? ` · sensor ${event.sensor_id}` : ''}
      </p>
    </div>
  );
}