import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { statuses } from '@/lib/statuses';
import { ChevronDown } from 'lucide-react';
import { useMemo } from 'react';

export interface StatusOption {
    value: number | string;
    label: string;
    icon?: any;
    bgColor?: string;
    textColor?: string;
    borderColor?: string;
}

interface StatusSelectorProps {
    handleStatusUpdate: any;
    status: number | string;
    statusOptions: any;
    id: number | string;
}

const StatusSelector = ({ id, handleStatusUpdate, status, statusOptions }: StatusSelectorProps) => {
    // Merge backend options with static statuses configuration
    const mergedStatuses = useMemo(() => {
        return statusOptions?.map((option: any) => {
            const optionValue = option.value;
            const numericValue = Number(optionValue);
            const staticStatus = Number.isNaN(numericValue) ? undefined : statuses.find((s) => s.value === numericValue);
            //** Merge: use static config if found for icon,bgColor,textColor,borderColor etc... */
            return {
                value: optionValue,
                name: option.label,
                label: option.label,
                icon: staticStatus?.icon,
                bgColor: staticStatus?.bgColor || 'bg-gray-100',
                textColor: staticStatus?.textColor || 'text-gray-700',
                borderColor: staticStatus?.borderColor || 'border-gray-700',
            };
        });
    }, [statusOptions]);

    const currentStatus = mergedStatuses?.find((s: any) => String(s.value) === String(status));

    // Debug logging
    if (!currentStatus) {
        console.warn('⚠️ StatusSelector: No matching status found', {
            status,
            mergedStatuses,
            statusOptions,
        });
    }
    const StatusIcon = currentStatus?.icon;
    const visibleStatuses = mergedStatuses?.filter((s: any) => String(s.value) !== String(status));
    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <div
                    className={`flex w-[150px] items-center justify-between gap-2 rounded-lg border p-1 px-2 ${currentStatus?.bgColor} ${currentStatus?.textColor} ${currentStatus?.borderColor}`}
                >
                    <div className="flex items-center gap-2">
                        {StatusIcon && <StatusIcon className="h-4 w-4" />}
                        <span className="font-medium">{currentStatus?.name}</span>
                    </div>
                    <ChevronDown className="h-4 w-4" />
                </div>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-[150px]">
                {visibleStatuses?.map((statusOption: any) => {
                    const Icon = statusOption.icon;
                    return (
                        <DropdownMenuItem
                            key={statusOption.value}
                            onClick={() => handleStatusUpdate(id, statusOption.value)}
                            className="cursor-pointer"
                        >
                            <div className="flex items-center gap-2">
                                {Icon && <Icon className={`h-4 w-4 ${statusOption.textColor}`} />}
                                <span>{statusOption.name}</span>
                            </div>
                        </DropdownMenuItem>
                    );
                })}
            </DropdownMenuContent>
        </DropdownMenu>
    );
};

export default StatusSelector;