'use client';

import { BarChart3, X } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Link } from '@/i18n/navigation';
import { useComparisonStore, MAX_COMPARE } from '@/lib/comparison-store';

export function CompareFloatingBar() {
  const t = useTranslations('compare');
  const selectedIds = useComparisonStore((s) => s.selectedIds);
  const clearAll = useComparisonStore((s) => s.clearAll);
  const removeFromCompare = useComparisonStore((s) => s.removeFromCompare);
  const canCompare = useComparisonStore((s) => s.canCompare());

  if (selectedIds.length === 0) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 p-3 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/80">
      <div className="mx-auto flex max-w-7xl flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-2">
          <BarChart3 className="h-5 w-5 text-primary" />
          <span className="text-sm font-medium">
            {t('selected', { count: selectedIds.length, max: MAX_COMPARE })}
          </span>
          <div className="flex gap-1">
            {selectedIds.map((id) => (
              <Badge key={id} variant="secondary" className="gap-1 text-xs">
                {id.slice(0, 8)}...
                <button
                  onClick={() => removeFromCompare(id)}
                  className="ml-0.5 rounded-full hover:bg-muted"
                  aria-label={t('removeItem')}
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            ))}
          </div>
        </div>
        <div className="flex gap-2">
          <Button variant="ghost" size="sm" onClick={clearAll}>
            {t('clearAll')}
          </Button>
          {canCompare ? (
            <Link href="/compare">
              <Button size="sm" className="gap-1">
                <BarChart3 className="h-4 w-4" />
                {t('compareNow')}
              </Button>
            </Link>
          ) : (
            <Button size="sm" disabled className="gap-1">
              <BarChart3 className="h-4 w-4" />
              {t('needMore')}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}