'use client';
import { Star } from 'lucide-react';
import { cn } from '@/lib/cn';
import { toWatchItem, useWatchlist, WATCH_MAX } from '@/lib/watchlist';

/**
 * Star toggle that adds/removes an entity from the local watchlist (`lib/watchlist.ts`). `aria-pressed` reflects the
 * state; renders a neutral placeholder before hydration so server and client markup match. Sits next to `CompareButton`.
 */
export function WatchButton({ e, size = 'md', className, label = 'Watch' }: { e: { slug: string; name: string; entity_type: string; organization?: { name: string } | string | null }; size?: 'sm' | 'md'; className?: string; label?: string }) {
  const wl = useWatchlist();
  const item = toWatchItem(e);
  const on = wl.ready && wl.has(item.slug);
  const full = wl.ready && wl.full && !on;
  return (
    <button
      type="button"
      onClick={() => {
        if (full) return;
        wl.toggle(item);
      }}
      aria-pressed={on}
      disabled={full}
      title={on ? 'Remove from watchlist' : full ? `The watchlist holds at most ${WATCH_MAX} entities` : 'Add to watchlist (stored in this browser)'}
      data-watch-button
      className={cn(
        'inline-flex shrink-0 items-center gap-1 border text-xs font-medium whitespace-nowrap transition-colors disabled:cursor-not-allowed disabled:opacity-40',
        size === 'sm' ? 'h-7 px-1.5' : 'h-9 px-2.5 text-sm',
        on ? 'border-accent-2 bg-accent-2-soft text-accent-2' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink',
        className,
      )}
    >
      <Star className={cn(size === 'sm' ? 'size-3' : 'size-3.5', on && 'fill-current')} aria-hidden />
      <span>{on ? 'Watching' : label}</span>
    </button>
  );
}