'use client';
import Link from 'next/link';
import { ConfidenceBadge, CountryChip, EventTypeBadge, ImportanceMeter } from '@/components/ui/badges';
import { LiveAgo } from '@/components/ui/live';
import { cn } from '@/lib/cn';
import { eventStyle } from '@/lib/event-styles';
import { fmtTime, truncate } from '@/lib/format';
import { routes } from '@/lib/site';
import type { Event } from '@/lib/types';
import { useEventDrawer } from './event-drawer-context';

/**
 * Dense feed row: hue bar · type chip · title (opens the evidence drawer) · company · importance · confidence · time.
 * `variant="feed"` is the live feed (fresh rows animate); `"table"` is the events list; `"timeline"` hides the company.
 */
export function EventRow({ event, fresh = false, selected = false, variant = 'feed', showCompany = true, className, id }: { event: Event; fresh?: boolean; selected?: boolean; variant?: 'feed' | 'table' | 'timeline'; showCompany?: boolean; className?: string; id?: string }) {
  const { open } = useEventDrawer();
  const s = eventStyle(event.event_type);
  const retracted = event.status === 'retracted';
  return (
    <li id={id} data-event-id={event.id} data-selected={selected || undefined} className={cn('group relative grid grid-cols-[3px_minmax(0,1fr)] gap-x-3 border-b border-rule', fresh && 'feed-new', selected && 'bg-surface-2', className)}>
      <span className="my-2 rounded-full" style={{ background: s.color }} aria-hidden />
      <div className={cn('min-w-0 py-2.5', variant === 'timeline' ? 'pr-1' : 'pr-0')}>
        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
          <EventTypeBadge type={event.event_type} subtype={variant !== 'feed' ? event.event_subtype : undefined} small />
          {showCompany && (
            <Link href={routes.company(event.company.slug)} className="max-w-[55%] truncate text-[13px] font-medium text-ink hover:text-accent">
              {event.company.display_name}
            </Link>
          )}
          {showCompany && <CountryChip code={event.company.country} />}
          <span className="ml-auto inline-flex items-center gap-2 text-[11px] text-ink-3">
            <ImportanceMeter importance={event.importance} />
            {variant === 'timeline' ? <span className="tnum">{fmtTime(event.detected_at)} UTC</span> : <LiveAgo at={event.detected_at} tick={variant === 'feed' ? 1000 : 30000} />}
          </span>
        </div>
        <button type="button" onClick={() => open(event)} className={cn('mt-1 block w-full text-left text-[14px] leading-snug text-ink hover:text-accent', retracted && 'line-through decoration-danger/60')} data-open-event>
          {event.title}
        </button>
        {event.summary && variant !== 'feed' && <p className="mt-0.5 text-[13px] leading-snug text-ink-2">{truncate(event.summary, 200)}</p>}
        <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-ink-3">
          <ConfidenceBadge label={event.confidence_label} />
          {event.old_value && event.new_value && (
            <span className="min-w-0 truncate">
              <span className="text-ink-3 line-through">{truncate(event.old_value, 28)}</span> → <span className="text-ink-2">{truncate(event.new_value, 28)}</span>
            </span>
          )}
          {event.origin !== 'deterministic' && <span className="uppercase tracking-wider">{event.origin}</span>}
          {retracted && <span className="text-danger">retracted</span>}
          <Link href={routes.event(event.id)} className="ml-auto opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 hover:text-accent">
            Details →
          </Link>
        </div>
      </div>
    </li>
  );
}

export function EventList({ events, className, variant = 'table', showCompany = true, emptyLabel = 'No monitored evidence available yet.' }: { events: Event[]; className?: string; variant?: 'feed' | 'table' | 'timeline'; showCompany?: boolean; emptyLabel?: string }) {
  if (!events.length) return <p className={cn('border border-dashed border-rule-strong px-4 py-8 text-center text-sm text-ink-3', className)}>{emptyLabel}</p>;
  return (
    <ul className={cn('border-t border-rule', className)}>
      {events.map((e) => (
        <EventRow key={e.id} event={e} variant={variant} showCompany={showCompany} />
      ))}
    </ul>
  );
}