'use client';
import { Star, X } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useMemo, useState } from 'react';
import { ChangeRow } from '@/components/changes/change-row';
import { EntityBadge } from '@/components/ui/badges';
import { EmptyState } from '@/components/ui/unavailable';
import { clientApi } from '@/lib/client-api';
import { routes } from '@/lib/site';
import type { ChangeEvent } from '@/lib/types';
import { useWatchlist, WATCH_EVENT_TYPES, WATCH_MAX } from '@/lib/watchlist';

type Feed = { status: 'idle' | 'loading' | 'ready'; events: ChangeEvent[]; failed: string[] };

/**
 * `/watchlist` body: the watched entities (remove buttons) and their merged event feed — `/changes?entity=<slug>&limit=20`
 * per item (≤ 12 items), merged, sorted by `effective_at ?? observed_at`, filtered to release / price / deprecation /
 * benchmark / provider / licence event types. Nothing is stored server-side.
 */
export function WatchlistView() {
  const wl = useWatchlist();
  const [feed, setFeed] = useState<Feed>({ status: 'idle', events: [], failed: [] });
  const slugs = useMemo(() => wl.items.map((i) => i.slug).slice(0, WATCH_MAX), [wl.items]);
  const key = slugs.join(',');

  useEffect(() => {
    if (!wl.ready) return;
    if (!slugs.length) {
      setFeed({ status: 'ready', events: [], failed: [] });
      return;
    }
    const ctrl = new AbortController();
    setFeed((f) => ({ ...f, status: 'loading' }));
    (async () => {
      const results = await Promise.all(slugs.map((s) => clientApi.entityChanges(s, 20, ctrl.signal).then((p) => ({ s, items: p.items ?? [] })).catch((e) => ({ s, items: null as ChangeEvent[] | null, e }))));
      if (ctrl.signal.aborted) return;
      const seen = new Set<string>();
      const events: ChangeEvent[] = [];
      const failed: string[] = [];
      for (const r of results) {
        if (!r.items) {
          failed.push(r.s);
          continue;
        }
        for (const e of r.items) {
          if (!WATCH_EVENT_TYPES.has(e.event_type) || seen.has(e.id)) continue;
          seen.add(e.id);
          events.push(e);
        }
      }
      events.sort((a, b) => new Date(b.effective_at ?? b.observed_at).getTime() - new Date(a.effective_at ?? a.observed_at).getTime());
      setFeed({ status: 'ready', events, failed });
    })();
    return () => ctrl.abort();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [key, wl.ready]);

  if (!wl.ready) return <p className="py-8 text-sm text-ink-3">Loading your watchlist…</p>;
  if (!wl.items.length)
    return (
      <EmptyState title="Nothing watched yet">
        Press <span className="inline-flex items-center gap-1 border border-rule px-1.5 py-0.5 text-xs text-ink-2"><Star className="size-3" aria-hidden /> Watch</span> on any model, organization, provider or benchmark page. The list lives in this browser only — no account.{' '}
        <Link href={routes.models()} className="link">Browse models →</Link>
      </EmptyState>
    );

  return (
    <div className="grid gap-10 lg:grid-cols-[18rem_minmax(0,1fr)]">
      <div>
        <div className="flex items-baseline justify-between">
          <p className="eyebrow">Watching · {wl.items.length}/{WATCH_MAX}</p>
          <button type="button" onClick={wl.clear} className="text-xs text-ink-3 hover:text-danger">
            Clear all
          </button>
        </div>
        <ul className="mt-2 border-t border-rule" data-watchlist-items>
          {wl.items.map((i) => (
            <li key={i.slug} className="flex items-center gap-2 border-b border-rule py-2">
              <EntityBadge type={i.entity_type} small />
              <Link href={routes.entity(i)} className="min-w-0 flex-1 truncate text-sm font-medium text-ink hover:text-accent">
                {i.name}
              </Link>
              {i.org && <span className="hidden truncate text-xs text-ink-3 xl:block">{i.org}</span>}
              <button type="button" onClick={() => wl.remove(i.slug)} className="flex size-9 shrink-0 items-center justify-center text-ink-3 hover:text-danger" aria-label={`Stop watching ${i.name}`}>
                <X className="size-4" aria-hidden />
              </button>
            </li>
          ))}
        </ul>
        {wl.items.length > 1 && (
          <p className="mt-3 text-xs">
            <Link href={routes.compare(wl.items.filter((i) => i.entity_type === wl.items[0]?.entity_type).slice(0, 6).map((i) => i.slug))} className="link">
              Compare the watched {wl.items[0]?.entity_type}s →
            </Link>
          </p>
        )}
      </div>
      <div>
        <p className="eyebrow">Relevant events · releases, prices, deprecations, benchmarks, providers, licences</p>
        {feed.status === 'loading' && !feed.events.length && <p className="mt-3 text-sm text-ink-3">Loading events…</p>}
        {feed.failed.length > 0 && <p className="mt-2 text-xs text-warning">Events unavailable for {feed.failed.length} {feed.failed.length === 1 ? 'entity' : 'entities'} (API did not answer).</p>}
        {feed.status === 'ready' && !feed.events.length && feed.failed.length < slugs.length && (
          <p className="mt-3 border-y border-rule py-8 text-center text-sm text-ink-3">No release, price, deprecation, benchmark, provider or licence events recorded yet for the watched entities.</p>
        )}
        {feed.events.length > 0 && (
          <ul className="mt-2 border-t border-rule" data-watchlist-feed>
            {feed.events.slice(0, 80).map((e) => (
              <ChangeRow key={e.id} e={e} showDate live={false} />
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}