'use client';
import { X } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { typeLabel } from '@/lib/site';
import { COMPARE_MAX, COMPARE_MIN, compareHref, useCompareTray } from './compare-store';

/**
 * Floating tray summary shown on listings while the visitor collects entities: "n selected · Compare →".
 * Fixed above the mobile tab bar (< md) and bottom-right on desktop. Hidden on /compare itself and when empty.
 */
export function CompareTrayBar() {
  const tray = useCompareTray();
  const pathname = usePathname();
  if (!tray.ready || tray.items.length === 0 || pathname === '/compare') return null;
  const can = tray.items.length >= COMPARE_MIN;
  return (
    <div role="status" aria-live="polite" className="fixed inset-x-2 bottom-[calc(var(--tabbar-h)+env(safe-area-inset-bottom,0px)+8px)] z-[44] md:inset-x-auto md:bottom-6 md:right-6">
      <div className="panel flex items-center gap-2 p-1.5 pl-3 shadow-lg">
        <p className="min-w-0 flex-1 text-sm text-ink-2">
          <span className="tnum font-medium text-ink">{tray.items.length}</span> / {COMPARE_MAX} {tray.type ? typeLabel(tray.type, true).toLowerCase() : 'selected'}
          <span className="hidden text-ink-3 sm:inline"> · {tray.items.map((i) => i.name).slice(0, 3).join(', ')}{tray.items.length > 3 ? ` +${tray.items.length - 3}` : ''}</span>
        </p>
        {can ? (
          <Link href={compareHref(tray.items)} className="inline-flex h-10 items-center bg-ink px-3 text-sm font-medium text-canvas hover:opacity-90">
            Compare →
          </Link>
        ) : (
          <span className="inline-flex h-10 items-center px-2 text-xs text-ink-3">Pick {COMPARE_MIN - tray.items.length} more</span>
        )}
        <button type="button" onClick={tray.clear} className="flex size-10 items-center justify-center text-ink-3 hover:text-ink" aria-label="Clear comparison tray">
          <X className="size-4" aria-hidden />
        </button>
      </div>
    </div>
  );
}