'use client';
import { ArrowUpRight } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { CountryChip, EventTypeBadge, ImportanceMeter } from '@/components/ui/badges';
import { LiveAgo } from '@/components/ui/live';
import { Sheet } from '@/components/ui/sheet';
import { clientApi } from '@/lib/client-api';
import { routes } from '@/lib/site';
import type { EventDetail, EventSource } from '@/lib/types';
import { useEventDrawer } from './event-drawer-context';
import { EventEvidence } from './event-evidence';

/** Right-side (≥ lg) / bottom (< lg) drawer: the event, its evidence and links to the permanent pages. */
export function EventDrawer() {
  const { event, close } = useEventDrawer();
  const [detail, setDetail] = useState<{ id: string; sources: EventSource[]; loaded: boolean } | null>(null);

  useEffect(() => {
    if (!event) return;
    const ctrl = new AbortController();
    setDetail({ id: event.id, sources: event.sources ?? [], loaded: false });
    clientApi
      .event(event.id, ctrl.signal)
      .then((d: EventDetail) => setDetail({ id: event.id, sources: d.sources ?? [], loaded: true }))
      .catch(() => setDetail((s) => (s ? { ...s, loaded: true } : s)));
    return () => ctrl.abort();
  }, [event]);

  return (
    <Sheet
      open={event !== null}
      onClose={close}
      eyebrow={event ? <EventTypeBadge type={event.event_type} subtype={event.event_subtype} /> : undefined}
      title={event?.title}
      footer={
        event ? (
          <div className="flex flex-wrap items-center gap-2 text-sm">
            <Link href={routes.event(event.id)} onClick={close} className="btn btn-primary btn-sm">
              Open event page <ArrowUpRight className="size-3.5" aria-hidden />
            </Link>
            <Link href={routes.company(event.company.slug)} onClick={close} className="btn btn-sm">
              {event.company.display_name}
            </Link>
            {event.source_url && (
              <a href={event.source_url} target="_blank" rel="noopener noreferrer" className="btn btn-sm">
                Source ↗
              </a>
            )}
          </div>
        ) : undefined
      }
    >
      {event && (
        <div className="space-y-4" data-event-drawer>
          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
            <Link href={routes.company(event.company.slug)} onClick={close} className="font-medium text-ink hover:text-accent">
              {event.company.display_name}
            </Link>
            <span className="mono text-xs text-ink-3">{event.company.canonical_domain}</span>
            <CountryChip code={event.company.country} />
            <span className="ml-auto inline-flex items-center gap-2 text-xs text-ink-3">
              <ImportanceMeter importance={event.importance} />
              <LiveAgo at={event.detected_at} />
            </span>
          </div>
          {event.summary && <p className="text-[14px] leading-relaxed text-ink-2">{event.summary}</p>}
          <EventEvidence event={event} sources={detail?.id === event.id ? detail.sources : event.sources} compact />
          {detail && detail.id === event.id && !detail.loaded && <p className="text-[11px] text-ink-3">Loading full source list…</p>}
        </div>
      )}
    </Sheet>
  );
}