import { Badge } from '@/components/ui/badge';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

type StatusOption = { value: string; label: string };

type StudentStatusBadgeProps = {
    status: string | null | undefined;
    statuses: StatusOption[];
    onChange: (status: string) => void;
};

const StudentStatusVariants: Record<
    string,
    'default' | 'secondary' | 'destructive' | 'outline'
> = {
    active: 'default',
    on_leave: 'secondary',
    graduated: 'outline',
    dropped_out: 'destructive',
};

export function StudentStatusBadge({
    status,
    statuses,
    onChange,
}: StudentStatusBadgeProps) {
    const label =
        statuses.find((option) => option.value === status)?.label ??
        status ??
        '-';
    const variant = (status && StudentStatusVariants[status]) || 'outline';

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <button
                    type="button"
                    className="cursor-pointer rounded-full border-0 bg-transparent p-0 outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                    <Badge variant={variant}>{label}</Badge>
                </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
                <DropdownMenuRadioGroup
                    value={status ?? ''}
                    onValueChange={onChange}
                >
                    {statuses.map((option) => (
                        <DropdownMenuRadioItem
                            key={option.value}
                            value={option.value}
                        >
                            {option.label}
                        </DropdownMenuRadioItem>
                    ))}
                </DropdownMenuRadioGroup>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}