"use client";

import React, { useMemo } from "react";
import { extractBrandsFromProducts, getAllBrands, Brand } from "@/lib/brand-extractor";
import { useTranslations } from "next-intl";

interface FilterBrandsProps {
    selectedBrands?: string[];
    onBrandChange?: (brands: string[]) => void;
    products?: any[];
    showAllBrands?: boolean; // Show all brands even if count is 0
}

export default function FilterBrands({
    selectedBrands = [],
    onBrandChange,
    products = [],
    showAllBrands = false,
}: FilterBrandsProps) {
    const t = useTranslations("filter")
    // Extract brands from products or use all brands
    const brands = useMemo(() => {
        if (showAllBrands || products.length === 0) {
            return getAllBrands();
        }
        return extractBrandsFromProducts(products);
    }, [products, showAllBrands]);

    const handleBrandChange = (brandId: string) => {
        if (!onBrandChange) return;
        if (selectedBrands[0] === brandId) {
            onBrandChange([]);
        } else {
            onBrandChange([brandId]);
        }
    };
    if(!brands || brands.length === 0) return null;

    return (
        <div className="space-y-4">
            <h3 className="font-bold text-black text-xl text-center">{t("byBrand")}</h3>
            <div className="flex justify-center">
                <div className="inline-flex flex-col space-y-2.5">
                    {brands.map((brand) => {
                        const isSelected = selectedBrands.includes(brand.id);
                        const hasProducts = brand.count > 0;

                        return (
                            <div
                                key={brand.id}
                                className={`group flex items-center gap-3 cursor-pointer transition-opacity duration-200 ${!hasProducts && !showAllBrands ? "opacity-30" : ""
                                    }`}
                                onClick={() => hasProducts || showAllBrands ? handleBrandChange(brand.id) : null}
                            >
                                {/* Radio indicator */}
                                <span
                                    className={`inline-block w-3.5 h-3.5 rounded-full border-2 flex-shrink-0 transition-colors duration-200 ${isSelected
                                        ? "border-black bg-black"
                                        : "border-gray-400 bg-white group-hover:border-gray-600"
                                        }`}
                                />
                                <span className="min-w-[24px] font-medium text-gray-400 text-base text-center">
                                    {hasProducts ? brand.count : ""}
                                </span>
                                <span
                                    className={`text-base transition-colors duration-200 ${isSelected
                                            ? "font-bold text-black"
                                            : hasProducts || showAllBrands
                                                ? "text-gray-600 group-hover:text-black"
                                                : "text-gray-400"
                                        }`}
                                >
                                    {brand.name}
                                    {showAllBrands && (
                                        <span className="mr-2 text-gray-400 text-sm">
                                            ({brand.nameEn})
                                        </span>
                                    )}
                                </span>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}