'use client';

import React from 'react';
import BlurHashImage from '@/components/ui/BlurHashImage';
import { HierarchyBrandItem } from '@/services/api/catalogService';

interface BrandSelectorProps {
  brands: HierarchyBrandItem[];
  selectedBrandId: string | null;
  onSelectBrand: (brandId: string | null) => void;
}

export const BrandSelector: React.FC<BrandSelectorProps> = ({
  brands,
  selectedBrandId,
  onSelectBrand,
}) => {
  if (!brands || brands.length === 0) return null;

  return (
    <div className="w-full mb-8">
      <h3 className="text-base font-bold text-gray-900 mb-4 tracking-tight">
        Select Brand
      </h3>

      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
        {/* All Brands Option */}
        <button
          onClick={() => onSelectBrand(null)}
          className={`flex flex-col items-center justify-center p-5 rounded-2xl border transition-all duration-200 aspect-[4/3] ${
            selectedBrandId === null
              ? 'bg-gray-900 text-white border-gray-900 shadow-md ring-2 ring-gray-900/20 scale-[1.02]'
              : 'bg-white text-gray-800 border-gray-200 hover:border-gray-400 hover:shadow-md'
          }`}
        >
          <span className="text-base font-extrabold tracking-wide mb-1">All</span>
          <span className="text-[11px] opacity-70 font-medium">All Brands</span>
        </button>

        {/* Brand Items */}
        {brands.map((brand) => {
          const isSelected = selectedBrandId === brand.brand_id;
          return (
            <button
              key={brand.brand_id}
              onClick={() => onSelectBrand(brand.brand_id)}
              className={`flex flex-col items-center justify-center p-5 rounded-2xl border transition-all duration-200 aspect-[4/3] ${
                isSelected
                  ? 'bg-red-50 text-red-700 border-red-500 ring-2 ring-red-500/20 shadow-md font-bold scale-[1.02]'
                  : 'bg-white text-gray-900 border-gray-200 hover:border-gray-400 hover:shadow-md'
              }`}
            >
              {brand.logo_url ? (
                <div className="relative w-12 h-12 mb-2">
                  <BlurHashImage
                    src={brand.logo_url}
                    alt={brand.name}
                    fill
                    className="object-contain"
                  />
                </div>
              ) : (
                <span className="text-lg font-black tracking-tight text-gray-900 mb-1">
                  {brand.name}
                </span>
              )}
              <span className="text-[11px] text-gray-500 font-medium capitalize truncate w-full text-center">
                {brand.name}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
};