'use client';

import Link from 'next/link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import { GitCompare, X } from 'lucide-react';
import { useCartStore } from '@/store/cartStore';
import { getImageUrl } from '@/lib/utils';
import { COMPARE_LIMIT } from '@/lib/compare';

export function CompareBar() {
  const pathname = usePathname();
  const compareList = useCartStore((s) => s.compareList) || [];
  const removeFromCompare = useCartStore((s) => s.removeFromCompare);
  const clearCompare = useCartStore((s) => s.clearCompare);
  const hydrated = useCartStore((s) => s._hasHydrated);

  if (!hydrated || pathname === '/compare' || compareList.length === 0) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-[90] border-t border-gray-200 bg-white/95 backdrop-blur-md shadow-[0_-12px_40px_rgba(16,24,40,0.12)]">
      <div className="max-w-7xl mx-auto px-4 py-3 flex items-center gap-4">
        <div className="hidden md:flex items-center gap-2 shrink-0">
          <div className="w-9 h-9 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
            <GitCompare className="w-4 h-4" />
          </div>
          <div>
            <p className="text-[13px] font-bold text-gray-900 leading-tight">Compare</p>
            <p className="text-[11px] text-gray-500">
              {compareList.length} of {COMPARE_LIMIT} selected
            </p>
          </div>
        </div>
        <div className="flex-1 flex items-center gap-2 overflow-x-auto">
          {compareList.map((product) => {
            const img = getImageUrl(product.images?.[0]?.image_url);
            return (
              <div
                key={product.product_id}
                className="relative flex items-center gap-2 pl-1 pr-7 py-1 rounded-lg border border-gray-200 bg-[#f8fafc] shrink-0 max-w-[180px]"
                title={product.name}
              >
                <div className="relative w-9 h-9 rounded-md bg-white overflow-hidden shrink-0">
                  {img ? (
                    <Image src={img} alt="" fill className="object-contain p-0.5" unoptimized />
                  ) : null}
                </div>
                <p className="text-[11px] font-semibold text-gray-800 line-clamp-2 leading-tight">
                  {product.name}
                </p>
                <button
                  type="button"
                  aria-label={`Remove ${product.name}`}
                  onClick={() => removeFromCompare(product.product_id)}
                  className="absolute top-1 right-1 w-4 h-4 rounded-full bg-gray-800 text-white flex items-center justify-center cursor-pointer"
                >
                  <X className="w-2.5 h-2.5" />
                </button>
              </div>
            );
          })}
        </div>
        <button
          type="button"
          onClick={() => clearCompare()}
          className="hidden sm:inline text-[12px] font-semibold text-gray-500 hover:text-gray-800 cursor-pointer"
        >
          Clear
        </button>
        <Link
          href="/compare"
          className="shrink-0 h-10 px-5 rounded-lg bg-primary text-white text-[13px] font-bold inline-flex items-center justify-center hover:brightness-95"
        >
          {compareList.length < 2 ? 'Open compare' : 'Compare now'}
        </Link>
      </div>
    </div>
  );
}