"use client";

import { useEffect, useState } from "react";
import Button from "@/src/components/admin/ui/button/Button";
import FilterGrid from "@/src/components/admin/form/FilterGrid";
import FilterGroup from "@/src/components/admin/form/FilterGroup";
import Label from "@/src/components/admin/form/Label";
import Select from "@/src/components/admin/form/Select";
import Input from "../form/input/InputField";
import dynamic from "next/dynamic";

const DatePicker = dynamic(() => import('@/src/components/admin/form/date-picker'), { ssr: false });

export interface FilterConfig {
    label: string;
    type: "input" | "select" | "multiselect" | "date" | "daterange";
    key: string;
    options?: { label: string; value: string | number }[];
    placeholder?: string;
}

export interface HybridFilterProps {
    setFilteredUrl: React.Dispatch<React.SetStateAction<string>>;
    filteredUrl: string;
    filters: FilterConfig[];
    includeDependant?: boolean;
    includeState?: boolean;
    includeCity?: boolean;
    includeLocation?: boolean;
    
}

export default function HybridTableFilters({ setFilteredUrl, filters, filteredUrl, includeDependant = false, includeState = true, includeCity = true, includeLocation = true }: HybridFilterProps) {
    const [filterValues, setFilterValues] = useState<Record<string, string | number | string[]>>({});
    const [locationFilters, setLocationFilters] = useState<{ state_id?: number; city_id?: number; location_id?: number }>({});
   
    const [resetTrigger, setResetTrigger] = useState<number>(0);

    useEffect(() => {
        const params = new URLSearchParams();
        
        // Add location filters
        if (locationFilters.state_id) params.append("state_id", locationFilters.state_id.toString());
        if (locationFilters.city_id) params.append("city_id", locationFilters.city_id.toString());
        if (locationFilters.location_id) params.append("location_id", locationFilters.location_id.toString());
        

        // Add other filters
        Object.entries(filterValues).forEach(([key, value]) => {
            if (Array.isArray(value) && value.length > 0) {
                params.append(key, value.join(","));
            } else if (value && value !== "" && value !== 0) {
                if (typeof value === 'string' && value.includes(' to ')) {
                    const [from, to] = value.split(' to ');
                    if (from) params.append('from', from);
                    if (to) params.append('to', to);
                } else {
                    params.append(key, value.toString());
                }
            }
        });

        const query = params.toString();
        const baseUrl = filteredUrl.split('?')[0];
        const newUrl = query ? `${baseUrl}?${query}` : baseUrl;
        
        if (newUrl !== filteredUrl) {
            setFilteredUrl(newUrl);
        }
    }, [filterValues, locationFilters, setFilteredUrl]);

    const handleChange = (key: string, value: string | number | string[]) => {
        setFilterValues(prev => ({ ...prev, [key]: value }));
    };

    const handleReset = () => {
        setFilterValues({});
        setLocationFilters({});
         
        setResetTrigger(prev => prev + 1);
    };

    return (
        <FilterGrid className="lg:grid-cols-4 xl:grid-cols-4 mt-4">
            {/* {includeDependant && (
                // <LocationFilters 
                //     onFilterChange={setLocationFilters} 
                //     resetTrigger={resetTrigger}
                //     includeState={includeState}      
                //     includeCity={includeCity}
                //     includeLocation={includeLocation}
                // />
            )} */}

       

            {filters.map((filter) => (
                <FilterGroup key={filter.key}>
                    <Label>{filter.label}</Label>
                    {filter.type === "input" ? (
                        <Input
                            type="text"
                            placeholder={filter.placeholder || `Enter ${filter.label}`}
                            value={filterValues[filter.key] || ""}
                            onChange={(e) => handleChange(filter.key, e.target.value)}
                            className="w-full"
                        />
                    )  : filter.type === "date" || filter.type === "daterange" ? (
                        <DatePicker
                            id={filter.key}
                            mode={filter.type === "daterange" ? "range" : "single"}
                            placeholder={filter.placeholder || `Select ${filter.label}`}
                            value={filterValues[filter.key] as string || ""}
                            onChange={(val) => handleChange(filter.key, val)}
                        />
                    ) : (
                        <Select
                            options={filter.options || []}
                            placeholder={filter.placeholder || `Select ${filter.label}`}
                            value={(typeof filterValues[filter.key] === 'string' || typeof filterValues[filter.key] === 'number') ? filterValues[filter.key] as string | number : 0}
                            onChange={(val) => handleChange(filter.key, val)}
                        />
                    )}
                </FilterGroup>
            ))}
            
            {(filters.length > 0 || includeDependant ) && (
                <FilterGroup className="flex items-end">
                    <Button className="py-2.5 px-5" onClick={handleReset} variant="warning">
                        Reset
                    </Button>
                </FilterGroup>
            )}
        </FilterGrid>
    );
}