'use client';
import { Check, Plus } from 'lucide-react';
import { cn } from '@/lib/cn';
import { COMPARE_MAX, type TrayItem, trayType, useCompareTray } from './compare-store';

/**
 * Small toggle that adds/removes an entity from the compare tray (localStorage-backed, mirrored into `/compare?ids=`).
 * `size="sm"` for table rows (still a ≥ 44 px hit area through padding on touch), default for entity headers.
 * Renders a neutral placeholder before hydration so server and client markup match.
 */
export function CompareButton({ e, size = 'md', className, label = 'Compare' }: { e: TrayItem | { slug: string; name: string; entity_type: string; organization?: { name: string } | null }; size?: 'sm' | 'md'; className?: string; label?: string }) {
  const tray = useCompareTray();
  const item: TrayItem = { slug: e.slug, name: e.name, entity_type: e.entity_type, organization: typeof e.organization === 'string' || e.organization === null || e.organization === undefined ? (e.organization as string | null | undefined) : e.organization.name };
  const on = tray.ready && tray.has(item.slug);
  const otherType = tray.ready && tray.type !== null && tray.type !== trayType(item.entity_type) && !on;
  const full = tray.ready && tray.full && !on;
  const title = on ? 'Remove from comparison' : otherType ? `Start a new ${item.entity_type} comparison (replaces the current tray)` : full ? `The tray holds at most ${COMPARE_MAX} items` : 'Add to comparison';
  return (
    <button
      type="button"
      onClick={() => {
        if (full) return;
        tray.toggle(item);
      }}
      aria-pressed={on}
      title={title}
      disabled={full}
      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 bg-accent-soft text-accent' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink',
        className,
      )}
    >
      {on ? <Check className={size === 'sm' ? 'size-3' : 'size-3.5'} aria-hidden /> : <Plus className={size === 'sm' ? 'size-3' : 'size-3.5'} aria-hidden />}
      <span>{on ? 'Comparing' : label}</span>
    </button>
  );
}