"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";

interface Feature {
    _id : string,
    name: string;
    values: string[];
}

interface FiltreProps {
    ozellikler: Feature[];
    setLoading: (loading: boolean) => void;
    setFiltreler: (filters: Record<string, string[]>) => void;
}

const Filtre = ({ ozellikler, setLoading, setFiltreler }: FiltreProps) => {
    const [selectedFilters, setSelectedFilters] = useState<Record<string, string[]>>({});
    const [openFilters, setOpenFilters] = useState<Record<string, boolean>>({});
    const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);

    const router = useRouter(); // useRouter hook'unu kullanıyoruz
    const searchParams = new URLSearchParams(window.location.search);  // Search params'ı alıyoruz

    useEffect(() => {
        const newFilters: Record<string, string[]> = {};

        ozellikler.forEach(({ name, values }) => {
            newFilters[name] = selectedFilters[name] || [];
        });

        setSelectedFilters(newFilters);
    }, [ozellikler]);

    const handleFilterChange = async (featureName: string, value: string) => {
        setLoading(true);

        setSelectedFilters((prevFilters) => {
            const currentValues = prevFilters[featureName] || [];
            const updatedValues = currentValues.includes(value)
                ? currentValues.filter((v) => v !== value) // Seçiliyse kaldır
                : [...currentValues, value]; // Değilse ekle

            return {
                ...prevFilters,
                [featureName]: updatedValues,
            };
        });
        searchParams.delete("page");  // "page" parametresini siliyoruz
        router.push(`${window.location.pathname}?${searchParams.toString()}`);  // URL'yi güncelliyoruz
        setLoading(false); // Loading durumunu false yap
    };

    useEffect(() => {
        const filtersChanged = Object.keys(selectedFilters).some(
            (key) => selectedFilters[key]?.length > 0
        );

        if (filtersChanged) {
            setFiltreler(selectedFilters);
        }
    }, [selectedFilters, setFiltreler]);

    const toggleFilter = (featureName: string) => {
        setOpenFilters((prev) => ({
            ...prev,
            [featureName]: !prev[featureName],
        }));
    };

    return (
        <div className="bg-black text-white p-5 xl:p-8">
            <button
                type="button"
                onClick={() => setMobileFiltersOpen((open) => !open)}
                className="flex w-full items-center justify-between text-left text-xl font-bold lg:hidden"
                aria-expanded={mobileFiltersOpen}
                aria-controls="product-filter-options"
            >
                <span>{mobileFiltersOpen ? "Filtreleri gizle" : "Filtreleri göster"}</span>
                <span aria-hidden="true">{mobileFiltersOpen ? "▲" : "▼"}</span>
            </button>
            <h3 className="hidden text-xl font-bold lg:block">Filtreler</h3>
            <div id="product-filter-options" className={`${mobileFiltersOpen ? "block" : "hidden"} mt-4 grid grid-cols-1 gap-x-4 gap-y-1 min-[480px]:grid-cols-2 lg:flex lg:flex-col lg:gap-2`}>
                 
                {ozellikler.length > 0 ? (
                    ozellikler.map((e, index) => (
                        <div key={index}>
                            <div
                                onClick={() => toggleFilter(e.name)}
                                className="break-words cursor-pointer font-semibold block mb-2"
                            >
                                {e.name} {openFilters[e.name] ? "▲" : "▼"}
                            </div>
                            <div className={openFilters[e.name] ? "block divide-y" : "hidden"}>
                                {Array.isArray(e.values) && e.values.length > 0 ? ( e.values.map((v, i) => (
                                    <div key={`filter-${index}-${i}`} className="flex min-w-0 justify-start py-2 items-baseline gap-2">
                                        <input
                                            type="checkbox"
                                            id={`filter-${index}-${i}`}
                                            checked={selectedFilters[e._id]?.includes(v) || false}
                                            onChange={() => handleFilterChange(e._id, v)}
                                        />
                                        <label className="min-w-0 break-words text-[12px]" htmlFor={`filter-${index}-${i}`}
                                        dangerouslySetInnerHTML={{ __html: v }} />

                                    </div>
                                ))): (<p>Filtre bulunamadı.</p>)}
                            </div>
                        </div>
                    ))
                ) : (
                    <p>Filtre bulunamadı.</p>
                )}
            </div>
        </div>
    );
};

export default Filtre;