import { ExternalLink } from 'lucide-react';
import Link from 'next/link';
import { EntityBadge, ImportanceMark } from '@/components/ui/badges';
import { LiveAgo } from '@/components/ui/live';
import { cn } from '@/lib/cn';
import { fmtDate, fmtDateTime, fmtUsdPerM, fmtValue } from '@/lib/format';
import { eventLabel, eventTone, propertyLabel, routes } from '@/lib/site';
import type { ChangeEvent } from '@/lib/types';

const TONE: Record<ReturnType<typeof eventTone>, string> = {
  new: 'text-positive',
  price: 'text-accent-2',
  warn: 'text-warning',
  danger: 'text-danger',
  bench: 'text-type-benchmark',
  neutral: 'text-ink-2',
};

function host(url: string): string {
  try {
    return new URL(url).hostname.replace(/^www\./, '');
  } catch {
    return 'source';
  }
}

/** Price payloads (`PRICE_CHANGED`, `PROVIDER_LISTED`) are `{ input_per_mtok, output_per_mtok }` objects — never JSON-dump them. */
function fmtSide(v: unknown, key?: string): string {
  if (v && typeof v === 'object' && !Array.isArray(v)) {
    const o = v as Record<string, unknown>;
    if ('input_per_mtok' in o || 'output_per_mtok' in o) return `${fmtUsdPerM(o.input_per_mtok)} in / ${fmtUsdPerM(o.output_per_mtok)} out`;
    const parts = Object.entries(o)
      .filter(([, x]) => x !== null && x !== undefined && typeof x !== 'object')
      .slice(0, 3)
      .map(([k, x]) => `${propertyLabel(k).toLowerCase()} ${fmtValue(x, k)}`);
    return parts.length ? parts.join(' · ') : fmtValue(v, key);
  }
  return fmtValue(v, key);
}

/** Old → new rendering for property changes and prices. */
export function Delta({ e }: { e: ChangeEvent }) {
  if (e.old_value === undefined || e.old_value === null || e.new_value === undefined || e.new_value === null) return null;
  const key = e.property ?? undefined;
  return (
    <span className="tnum inline-flex min-w-0 flex-wrap items-center gap-1 break-words text-xs">
      <span className="text-ink-3 line-through decoration-ink-3/60">{fmtSide(e.old_value, key)}</span>
      <span className="text-ink-3">→</span>
      <span className="font-medium text-ink">{fmtSide(e.new_value, key)}</span>
    </span>
  );
}

/**
 * One event in a feed: importance meter · time · entity badge + name · summary · property delta · source.
 * `dense` (homepage) hides the delta and connector; `showDate` prints the date instead of relative time.
 */
export function ChangeRow({ e, dense = false, showDate = false, className, live = true, trailing }: { e: ChangeEvent; dense?: boolean; showDate?: boolean; className?: string; live?: boolean; /** Extra node after the summary (D3: grouped sources, evidence links). */ trailing?: React.ReactNode }) {
  const tone = eventTone(e.event_type);
  // 1.1: occurred_at = coalesce(effective_at, observed_at); the title always tells when AI Atlas observed it.
  const when = e.occurred_at ?? e.effective_at ?? e.observed_at;
  const observedTitle = `observed ${fmtDateTime(e.observed_at)}${e.effective_at ? ` · effective ${fmtDate(e.effective_at)}` : ''}`;
  return (
    <li className={cn('row-y grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 border-b border-rule md:grid-cols-[5.5rem_auto_minmax(0,1fr)_auto] md:items-baseline', className)} data-event-id={e.id}>
      <div className="col-span-2 flex items-center gap-2 text-xs text-ink-3 md:col-span-1 md:block">
        {showDate ? <time dateTime={when} title={observedTitle}>{fmtDate(when)}</time> : live ? <LiveAgo at={e.observed_at} /> : <time dateTime={e.observed_at} title={observedTitle}>{fmtDate(e.observed_at)}</time>}
        {e.is_backfill && <span className="ml-1 rounded-[3px] bg-surface-2 px-1 text-[10px] uppercase tracking-wide text-ink-3" title="Historical backfill: imported when the source was first crawled, not observed live">backfill</span>}
        <ImportanceMark importance={e.importance} className="md:hidden" />
      </div>
      <div className="hidden md:flex md:items-center md:self-center">
        <ImportanceMark importance={e.importance} />
      </div>
      <div className="col-span-2 min-w-0 md:col-span-1">
        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
          <span className={cn('text-[11px] font-medium uppercase tracking-wide', TONE[tone])}>{eventLabel(e.event_type)}</span>
          {e.entity && (
            <>
              <EntityBadge type={e.entity.entity_type} small />
              <Link href={routes.entity(e.entity)} className="max-w-full truncate text-[15px] font-medium text-ink hover:text-accent hover:underline">
                {e.entity.name}
              </Link>
              {e.entity.organization && <span className="max-w-full truncate text-xs text-ink-3">{e.entity.organization.name}</span>}
            </>
          )}
        </div>
        <p className={cn('mt-0.5 break-words text-sm text-ink-2 [overflow-wrap:anywhere]', dense && 'line-clamp-2')}>{e.summary}</p>
        {!dense && (
          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5">
            {e.property && <span className="text-xs text-ink-3">{propertyLabel(e.property)}</span>}
            <Delta e={e} />
            {e.connector_name && <span className="mono text-[11px] text-ink-3">{e.connector_name}</span>}
          </div>
        )}
        {trailing}
      </div>
      <div className="col-span-2 mt-1 text-xs md:col-span-1 md:mt-0 md:text-right">
        {e.source_url ? (
          <a href={e.source_url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-ink-3 hover:text-accent">
            {host(e.source_url)} <ExternalLink className="size-3" aria-hidden />
          </a>
        ) : (
          <span className="text-ink-3">—</span>
        )}
      </div>
    </li>
  );
}

/** Group events by UTC day (YYYY-MM-DD of `occurred_at` when present — 1.1 feeds — else observed_at). */
export function groupByDay(events: ChangeEvent[], field: 'occurred' | 'observed' = 'occurred'): { day: string; items: ChangeEvent[] }[] {
  const map = new Map<string, ChangeEvent[]>();
  for (const e of events) {
    const day = (field === 'occurred' ? e.occurred_at ?? e.effective_at ?? e.observed_at : e.observed_at).slice(0, 10);
    const arr = map.get(day);
    if (arr) arr.push(e);
    else map.set(day, [e]);
  }
  return [...map.entries()].map(([day, items]) => ({ day, items }));
}