"use client";

/**
 * Radio Component
 * 
 * A premium, animated radio button with polished interactions.
 * Features smooth scaling, subtle hover ripples, and refined typography.
 */
import { InputHTMLAttributes, forwardRef, useId, useState, useEffect } from "react";
import { cn } from '@/lib/cn';

export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
    label?: string;
    error?: string;
    helperText?: string;
}

export const Radio = forwardRef<HTMLInputElement, RadioProps>(
    ({ className, label, error, helperText, id, disabled, checked, onChange, ...props }, ref) => {
        const generatedId = useId();
        const radioId = id ?? `radio-${generatedId.replace(/:/g, '-')}`;

        // Internal state to sync with props
        const [isChecked, setIsChecked] = useState(checked || false);

        useEffect(() => {
            setIsChecked(checked || false);
        }, [checked]);

        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
            setIsChecked(e.target.checked);
            onChange?.(e);
        };

        return (
            <div className={cn('group/radio inline-flex flex-col gap-1.5', className)}>
                <label
                    htmlFor={radioId}
                    className={cn(
                        "relative flex items-center gap-3 cursor-pointer group/label select-none px-1 py-0.5 rounded-lg transition-all duration-300",
                        disabled ? "opacity-40 cursor-not-allowed" : "hover:bg-slate-50"
                    )}
                >
                    {/* Actual Invisible Input */}
                    <input
                        ref={ref}
                        type="radio"
                        id={radioId}
                        className="sr-only peer"
                        disabled={disabled}
                        checked={isChecked}
                        onChange={handleChange}
                        aria-invalid={error ? 'true' : 'false'}
                        aria-describedby={error ? `${radioId}-error` : helperText ? `${radioId}-helper` : undefined}
                        {...props}
                    />

                    {/* Visual Radio Container */}
                    <div className="relative flex items-center justify-center shrink-0">
                        {/* Hover Ripple Effect */}
                        <div className={cn(
                            "absolute inset-0 -m-2 rounded-full transition-all duration-300 scale-0 group-hover/label:scale-100 group-hover/label:bg-slate-200/50",
                            isChecked && "group-hover/label:bg-slate-900/5",
                            disabled && "hidden"
                        )} />

                        {/* Outer Circle */}
                        <div className={cn(
                            "w-5 h-5 rounded-full border-2 transition-all duration-300 flex items-center justify-center",
                            error
                                ? "border-rose-400 bg-rose-50/40"
                                : isChecked
                                    ? "border-slate-900 bg-white"
                                    : "border-slate-300 bg-white group-hover/label:border-slate-400",
                            isActive(isChecked, error),
                            error
                                ? "peer-focus-visible:ring-2 peer-focus-visible:ring-rose-500/20"
                                : "peer-focus-visible:ring-2 peer-focus-visible:ring-violet-500/20"
                        )}>
                            {/* Inner Circle (Indicator) */}
                            <div
                                className={cn(
                                    'w-2 h-2 rounded-full transition-all duration-500 cubic-bezier(0.34, 1.56, 0.64, 1)',
                                    isChecked ? 'scale-100 opacity-100' : 'scale-0 opacity-0',
                                    error ? 'bg-rose-500' : 'bg-slate-900'
                                )}
                            />
                        </div>
                    </div>

                    {/* Label Text */}
                    {label && (
                        <span
                            className={cn(
                                'text-sm font-semibold transition-all duration-300',
                                isChecked ? 'text-slate-900' : 'text-slate-500',
                                disabled ? 'text-slate-400' : 'group-hover/label:text-slate-800'
                            )}
                        >
                            {label}
                        </span>
                    )}
                </label>

                {/* Support Text */}
                <div className="ml-[32px] space-y-1">
                    {error && (
                        <p id={`${radioId}-error`} className="text-[11px] font-bold text-rose-600 flex items-center gap-1 animate-in fade-in slide-in-from-left-1">
                            <span className="w-1 h-1 rounded-full bg-rose-600" />
                            {error}
                        </p>
                    )}
                    {helperText && !error && (
                        <p id={`${radioId}-helper`} className="text-[11px] font-medium text-slate-500 leading-tight">
                            {helperText}
                        </p>
                    )}
                </div>
            </div>
        );
    }
);

// Helper to determine active border classes
const isActive = (checked: boolean, error: string | undefined) => {
    if (error) return "";
    if (checked) return "shadow-[0_0_0_4px_rgba(15,23,42,0.06)] scale-105";
    return "";
};

Radio.displayName = 'Radio';