'use client';

import { useCompareStore } from '@/lib/compare-store';
import { X, GitCompare } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

export function CompareBar() {
  const { items, removeItem, clearAll } = useCompareStore();

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

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-border shadow-lg">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2 shrink-0">
            <GitCompare className="size-4 text-accent" />
            <span className="text-sm font-semibold text-primary hidden sm:block">
              Porównaj ({items.length}/3)
            </span>
          </div>

          <div className="flex items-center gap-3 flex-1 overflow-x-auto">
            {items.map((item) => (
              <div key={item.slug} className="flex items-center gap-2 bg-slate-50 rounded-lg px-3 py-1.5 border border-border shrink-0">
                <div className="relative size-8 bg-white rounded">
                  <Image src={item.image} alt={item.name} fill className="object-contain p-0.5" unoptimized={item.image.startsWith('http')} />
                </div>
                <div className="hidden sm:block">
                  <p className="text-xs font-medium text-primary line-clamp-1 max-w-[140px]">{item.name}</p>
                  {item.price && <p className="text-xs text-accent font-bold">{item.price.toLocaleString('pl-PL')} zł</p>}
                </div>
                <button onClick={() => removeItem(item.slug)} className="text-text-muted hover:text-primary transition-colors ml-1">
                  <X className="size-3.5" />
                </button>
              </div>
            ))}

            {/* Puste sloty */}
            {Array.from({ length: 3 - items.length }).map((_, i) => (
              <div key={i} className="size-11 rounded-lg border-2 border-dashed border-border flex items-center justify-center text-text-muted shrink-0">
                <span className="text-lg">+</span>
              </div>
            ))}
          </div>

          <div className="flex items-center gap-2 shrink-0">
            {items.length >= 2 && (
              <Link href="/porownaj">
                <button className="btn btn-primary text-white font-bold text-sm py-2 px-4">
                  Porównaj
                </button>
              </Link>
            )}
            <button onClick={clearAll} className="text-xs text-text-muted hover:text-primary transition-colors">
              Wyczyść
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}