import MemberHargaController from "@/actions/App/Http/Controllers/MemberHargaController";
import useReactSelectTheme from "@/hooks/use-react-select";
import axios from "axios";
import { useEffect, useMemo, useState } from "react";
import Select from "react-select";

type OptionType = {
    value: string;
    label: string;
    [key: string]: any;
};

interface Props {
    value?: string;
    onChange: (option: OptionType | null) => void;
    id?: string;
    memberId?: number;
    origin?: string;
    placeholder?: string;
    isClearable?: boolean;
    isDisabled?: boolean;
}

export default function SelectMemberRute({ value, onChange, id = "id_rute", memberId, origin, placeholder = 'Pilih Rute', isClearable = false, isDisabled = false, }: Props) {
    const reactSelectTheme = useReactSelectTheme();
    const [options, setOptions] = useState<OptionType[]>([]);
    const [isLoading, setIsLoading] = useState(false);

    const loadOptions = async () => {
        // Jangan fetch jika memberId belum ada (kecuali logika bisnis membolehkan)
        if (!memberId) {
            setOptions([]);
            return;
        }

        setIsLoading(true);
        try {
            const { data: res } = await axios.get(MemberHargaController.ruteMember.url(), {
                params: {
                    id_member: memberId,
                    ...(origin && { origin: origin }),
                    json: true,
                }
            });

            // Handle struktur response: check jika res adalah array langsung atau terbungkus 'data'
            const rawData = Array.isArray(res) ? res : (res?.data || []);

            const mappedOptions = rawData.map((item: any) => {
                // Tentukan field mana yang jadi value/label based on logic 'origin'
                const targetValue = !origin ? item.kota_asal : item.kota_tujuan;

                return {
                    value: targetValue,
                    label: targetValue, // Bisa diganti format lain misal: "Jakarta -> Bandung"
                    ...item,
                };
            });

            // Filter unique options jika perlu (misal ada kota yang sama di multiple rows)
            // const uniqueOptions = ... (opsional)

            setOptions(mappedOptions);
        } catch (error) {
            console.error("Failed to load rute member:", error);
            setOptions([]);
        } finally {
            setIsLoading(false);
        }
    }

    // Trigger load saat dependency berubah
    useEffect(() => {
        loadOptions();
    }, [memberId, origin]);

    const selectedOption = useMemo(() => {
        if (!value || options.length === 0) return null;
        return options.find((item) => String(item.value) === String(value)) || null;
    }, [value, options]);

    return (
        <Select
            key={`rute-${memberId}-${origin}`}
            inputId={id}
            options={options}
            value={selectedOption}
            onChange={(val) => onChange(!val ? null : val as OptionType)}
            styles={reactSelectTheme}
            placeholder={placeholder}
            isClearable={isClearable}
            isDisabled={isDisabled}
            isLoading={isLoading}
            noOptionsMessage={() => memberId ? "Tidak ada rute ditemukan" : "Pilih Member Terlebih Dahulu"}
        />
    )
}