'use client';

import { useMemo, useState, useEffect } from "react";

interface Option {
    value: string | number;
    label: string;
}

interface AutoCompleteProps {
    label: string;
    options: Option[];
    value: string | number;
    placeholder?: string;
    className?: string;
    required?: boolean;
    onSelect: (option: Option) => void;
}

export function AutoComplete({
    label,
    options,
    value,
    placeholder,
    className,
    required = false,
    onSelect
}: AutoCompleteProps) {
    const [query, setQuery] = useState("");

    useEffect(() => {
        const selectedOption = options.find(
            opt => String(opt.value) === String(value)
        );

        if (selectedOption) {
            setQuery(selectedOption.label);
        }

    }, [value, options]);

    const [open, setOpen] = useState(false);

    const filteredOptions = useMemo(() => {
        if (!query) return options;

        return options.filter((opt) =>
            opt.label
                .toLowerCase()
                .includes(query.toLowerCase())
        );

    }, [query, options]);

    return (
        <div className={`relative flex flex-col ${className}`}>
            <label className="mb-1 text-xs font-medium text-[#2f5d4b]">
                {label}
                {required && (
                    <span className="text-red-500 ml-1">*</span>
                )}
            </label>

            <input
                type="text"
                value={query}
                placeholder={placeholder}
                onFocus={() => setOpen(true)}
                onBlur={() => {
                    setTimeout(() => setOpen(false), 150);
                }}
                onChange={(e) => {
                    setQuery(e.target.value);
                    setOpen(true);
                }}
                className="p-2.5 text-xs font-medium h-10 rounded-lg border border-[#cfded7] focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/20"
            />

            {open && filteredOptions.length > 0 && (
                <div
                    className="top-full z-50 mt-1 max-h-60 w-full overflow-auto rounded-xl border border-[#dfe7e3] bg-white shadow-lg"
                >
                    <button
                        key=""
                        type="button"
                        className="w-full px-3 py-2 text-left hover:bg-[#f3faf7]"
                        onClick={() => {
                            setQuery("--");
                            setOpen(false);
                            onSelect({
                                value: "",
                                label: ""
                            });
                        }}
                    >
                        {"--"}
                    </button>
                    {filteredOptions.map((option) => (
                        <button
                            key={option.value}
                            type="button"
                            className="w-full px-3 py-2 text-left hover:bg-[#f3faf7]"
                            onClick={() => {
                                setQuery(option.label);
                                setOpen(false);
                                onSelect(option);
                            }}
                        >
                            {option.label}
                        </button>
                    ))}
                </div>
            )}
        </div>
    );
}

export function AutoCompleteGroup({
    label,
    options,
    value,
    placeholder,
    className,
    required = false,
    onSelect
}: AutoCompleteProps) {
    const [query, setQuery] = useState("");
    const [open, setOpen] = useState(false);
    const flatOptions = useMemo(() => {

        if (Array.isArray(options)) {
            return options;
        }

        return Object.entries(options).flatMap(
            ([zone, items]: [string, any]) =>
                items.map((item: any) => ({
                    ...item,
                    zone
                }))
        );
    }, [options]);

    const filteredOptions = useMemo(() => {
        if (!query) return flatOptions;

        return flatOptions.filter((opt) =>
            opt.label
                .toLowerCase()
                .includes(query.toLowerCase())
        );

    }, [query, options]);

    const groupedFilteredOptions = useMemo(() => {
        return filteredOptions.reduce(
            (acc: Record<string, any[]>, option: any) => {
                const zone = option.zone || "Autres";

                if (!acc[zone]) {
                    acc[zone] = [];
                }

                acc[zone].push(option);

                return acc;
            },
            {}
        );
    }, [filteredOptions]);

    useEffect(() => {
        const selectedOption = flatOptions.find(
            opt => String(opt.value) === String(value)
        );

        if (selectedOption) {
            setQuery(selectedOption.label);
        }

    }, [value, options]);

    return (
        <div className={`relative flex flex-col ${className}`}>
            <label className="mb-1 text-xs font-medium text-[#2f5d4b]">
                {label}
                {required && (
                    <span className="text-red-500 ml-1">*</span>
                )}
            </label>

            <input
                type="text"
                value={query}
                placeholder={placeholder}
                onFocus={() => setOpen(true)}
                onBlur={() => {
                    setTimeout(() => setOpen(false), 150);
                }}
                onChange={(e) => {
                    setQuery(e.target.value);
                    setOpen(true);
                }}
                className="p-2.5 text-xs font-medium h-10 rounded-lg border border-[#cfded7] focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/20"
            />

            {open && filteredOptions.length > 0 && (
                <div
                    className="top-full z-50 mt-1 max-h-60 w-full overflow-auto rounded-xl border border-[#dfe7e3] bg-white shadow-lg"
                >
                    <button
                        key=""
                        type="button"
                        className="w-full px-3 py-2 text-left hover:bg-[#f3faf7]"
                        onClick={() => {
                            setQuery("--");
                            setOpen(false);
                            onSelect({
                                value: "",
                                label: ""
                            });
                        }}
                    >
                        {"--"}
                    </button>
                    {Object.entries(groupedFilteredOptions).map(([zone, items]: any) => (
                        <div key={zone}>

                            <div
                                className="
          sticky top-0
          px-3 py-2
          text-xs font-semibold
          text-[#2f5d4b]
          bg-[#edf7f2]
          
        "
                            >
                                {zone}
                            </div>

                            {items.map((option: any) => (
                                <button
                                    key={option.value}
                                    type="button"
                                    className="
            w-full
            px-3 py-2
            text-left
            hover:bg-[#f3faf7]
          "
                                    onClick={() => {
                                        setQuery(option.label);
                                        setOpen(false);
                                        onSelect(option);
                                    }}
                                >
                                    {option.label}
                                </button>
                            ))}
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}