import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';
import { Check, UserPlus, Users } from 'lucide-react';

export type OwnerMode = 'create' | 'existing';

/**
 * The two ways to attach a propriétaire to a new dossier, presented as stacked
 * option cards (radio semantics) ABOVE the search field — previously the "create"
 * path was a button buried at the bottom of the combobox dropdown, which made it
 * look like an owner rather than a mode.
 */
export const OwnerModeSelector = ({ value, onChange }: { value: OwnerMode | null; onChange: (mode: OwnerMode) => void }) => {
    const { t } = useTranslation();

    const options: { mode: OwnerMode; icon: typeof UserPlus; title: string; hint: string }[] = [
        {
            mode: 'create',
            icon: UserPlus,
            title: t('crm', 'owner_mode_create_title'),
            hint: t('crm', 'owner_mode_create_hint'),
        },
        {
            mode: 'existing',
            icon: Users,
            title: t('crm', 'owner_mode_existing_title'),
            hint: t('crm', 'owner_mode_existing_hint'),
        },
    ];

    return (
        <div role="radiogroup" className="flex flex-col gap-2">
            {options.map(({ mode, icon: Icon, title, hint }) => {
                const isActive = value === mode;
                return (
                    <button
                        key={mode}
                        type="button"
                        role="radio"
                        aria-checked={isActive}
                        onClick={() => onChange(mode)}
                        className={cn(
                            'flex w-full cursor-pointer items-start gap-3 rounded-lg border p-3 text-left transition-colors',
                            isActive ? 'border-secondary bg-secondary/10' : 'border-border hover:bg-accent',
                        )}
                    >
                        <span
                            className={cn(
                                'mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
                                isActive ? 'bg-secondary text-white' : 'bg-muted text-muted-foreground',
                            )}
                        >
                            <Icon className="h-4 w-4" />
                        </span>
                        <span className="flex-1">
                            <span className={cn('block text-sm font-medium', isActive && 'text-secondary')}>{title}</span>
                            <span className="text-muted-foreground block text-xs">{hint}</span>
                        </span>
                        <Check className={cn('text-secondary mt-1 h-4 w-4 shrink-0', isActive ? 'opacity-100' : 'opacity-0')} />
                    </button>
                );
            })}
        </div>
    );
};