import { ReactNode } from 'react';

/**
 * Modern radio grubu — pill (segmented) tarzı.
 * Az seçenekli (2-5) durumlar için.
 *
 * Örnek:
 *   <RadioGroup value={tip} onChange={setTip}
 *     options={[
 *       { value: 'a', label: 'Aktif' },
 *       { value: 'p', label: 'Pasif' },
 *     ]} />
 */
interface Option {
    value: string | number;
    label: ReactNode;
    aciklama?: ReactNode;
    icon?: ReactNode;
    disabled?: boolean;
}

interface Props {
    value: string | number | null | undefined;
    onChange: (yeni: string | number) => void;
    options: Option[];
    /** "segment" = bitişik, "kart" = ayrı kartlar */
    varyant?: 'segment' | 'kart';
    className?: string;
}

export default function RadioGroup({
    value,
    onChange,
    options,
    varyant = 'segment',
    className = '',
}: Props) {
    if (varyant === 'segment') {
        return (
            <div className={`inline-flex rounded-lg border border-slate-300 bg-slate-50 p-0.5 shadow-sm ${className}`} role="radiogroup">
                {options.map((opt) => {
                    const aktif = opt.value === value;
                    return (
                        <button
                            key={String(opt.value)}
                            type="button"
                            role="radio"
                            aria-checked={aktif}
                            disabled={opt.disabled}
                            onClick={() => !opt.disabled && onChange(opt.value)}
                            className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50 ${
                                aktif
                                    ? 'bg-white text-blue-700 shadow-sm ring-1 ring-blue-200'
                                    : 'text-slate-600 hover:bg-white/60'
                            }`}
                        >
                            {opt.icon}
                            {opt.label}
                        </button>
                    );
                })}
            </div>
        );
    }

    // Kart varyantı — radyo butonu yerine seçilebilir kart
    return (
        <div className={`grid gap-2 ${className}`} role="radiogroup">
            {options.map((opt) => {
                const aktif = opt.value === value;
                return (
                    <button
                        key={String(opt.value)}
                        type="button"
                        role="radio"
                        aria-checked={aktif}
                        disabled={opt.disabled}
                        onClick={() => !opt.disabled && onChange(opt.value)}
                        className={`flex items-center gap-3 rounded-xl border-2 px-4 py-3 text-left transition disabled:cursor-not-allowed disabled:opacity-50 ${
                            aktif
                                ? 'border-blue-500 bg-blue-50 shadow-sm'
                                : 'border-slate-200 bg-white hover:border-slate-300'
                        }`}
                    >
                        <span
                            className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border-2 transition ${
                                aktif ? 'border-blue-600 bg-white' : 'border-slate-300'
                            }`}
                        >
                            {aktif && <span className="h-2.5 w-2.5 rounded-full bg-blue-600" />}
                        </span>
                        {opt.icon}
                        <div className="min-w-0 flex-1">
                            <div className={`text-sm font-medium ${aktif ? 'text-blue-900' : 'text-slate-800'}`}>{opt.label}</div>
                            {opt.aciklama && <div className="text-xs text-slate-500">{opt.aciklama}</div>}
                        </div>
                    </button>
                );
            })}
        </div>
    );
}