import { useEffect, useState } from 'react'; 
import GuestLayout from '@/Layouts/GuestLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { 
    Card, 
    CardContent, 
    CardDescription, 
    CardHeader, 
    CardTitle, 
    CardFooter 
} from '@/Components/ui/card';
import { User, Mail, Lock, Loader2, ArrowRight, AtSign, Eye, EyeOff } from 'lucide-react';
import useTranslation from '@/hooks/useTranslation'; 

export default function Register() {
    const { t } = useTranslation();

    const [showPassword, setShowPassword] = useState(false);
    const [showConfirmPassword, setShowConfirmPassword] = useState(false);

    const { data, setData, post, processing, errors, reset } = useForm({
        name: '',
        username: '',
        email: '',
        password: '',
        password_confirmation: '',
    });

    useEffect(() => {
        return () => {
            reset('password', 'password_confirmation');
        };
    }, []);

    const submit = (e) => {
        e.preventDefault();
        post(route('register'));
    };

    return (
        <GuestLayout>
            <Head title={t('_register', 'Register')} />

            <div className="flex items-center justify-center min-h-[80vh]">
                <Card className="w-full max-w-md shadow-xl border-0 sm:border bg-card">
                    
                    <CardHeader className="space-y-1 text-center">
                        <CardTitle className="text-2xl font-bold tracking-tight">
                            {t('_auth_create_account', 'Create an account')}
                        </CardTitle>
                        <CardDescription>
                            {t('_auth_create_desc', 'Enter your information below to create your account')}
                        </CardDescription>
                    </CardHeader>

                    <CardContent>
                        <form onSubmit={submit} className="space-y-4">
                            
                            {/* Name Field */}
                            <div className="space-y-2">
                                <Label htmlFor="name">{t('_full_name', 'Full Name')}</Label>
                                <div className="relative">
                                    <User className="absolute start-3 top-2.5 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="name"
                                        name="name"
                                        placeholder="John Doe"
                                        value={data.name}
                                        className="ps-9"
                                        autoComplete="name"
                                        autoFocus
                                        onChange={(e) => setData('name', e.target.value)}
                                        required
                                    />
                                </div>
                                {errors.name && (
                                    <p className="text-sm font-medium text-destructive">
                                        {errors.name}
                                    </p>
                                )}
                            </div>

                            {/* Username Field */}
                            <div className="space-y-2">
                                <Label htmlFor="username">{t('_username', 'Username')}</Label>
                                <div className="relative">
                                    <AtSign className="absolute start-3 top-2.5 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="username"
                                        name="username"
                                        placeholder="johndoe123"
                                        value={data.username}
                                        className="ps-9"
                                        autoComplete="username"
                                        onChange={(e) => setData('username', e.target.value)}
                                        required
                                    />
                                </div>
                                {errors.username && (
                                    <p className="text-sm font-medium text-destructive">
                                        {errors.username}
                                    </p>
                                )}
                            </div>

                            {/* Email Field */}
                            <div className="space-y-2">
                                <Label htmlFor="email">{t('_email', 'Email Address')}</Label>
                                <div className="relative">
                                    <Mail className="absolute start-3 top-2.5 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="email"
                                        type="email"
                                        name="email"
                                        placeholder="name@example.com"
                                        value={data.email}
                                        className="ps-9"
                                        autoComplete="email"
                                        onChange={(e) => setData('email', e.target.value)}
                                        required
                                    />
                                </div>
                                {errors.email && (
                                    <p className="text-sm font-medium text-destructive">
                                        {errors.email}
                                    </p>
                                )}
                            </div>

                            {/* Password Field - Updated with Eye Icon */}
                            <div className="space-y-2">
                                <Label htmlFor="password">{t('_password', 'Password')}</Label>
                                <div className="relative">
                                    <Lock className="absolute start-3 top-2.5 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="password"
                                        type={showPassword ? "text" : "password"} 
                                        name="password"
                                        placeholder="••••••••"
                                        value={data.password}
                                        className="ps-9 pe-10"
                                        autoComplete="new-password"
                                        onChange={(e) => setData('password', e.target.value)}
                                        required
                                    />
                                    {/* Toggle Button */}
                                    <button
                                        type="button"
                                        onClick={() => setShowPassword(!showPassword)}
                                        className="absolute end-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground transition-colors"
                                    >
                                        {showPassword ? (
                                            <EyeOff className="h-4 w-4" />
                                        ) : (
                                            <Eye className="h-4 w-4" />
                                        )}
                                        <span className="sr-only">
                                            {showPassword ? 'Hide password' : 'Show password'}
                                        </span>
                                    </button>
                                </div>
                                {errors.password && (
                                    <p className="text-sm font-medium text-destructive">
                                        {errors.password}
                                    </p>
                                )}
                            </div>

                            {/* Confirm Password Field - Updated with Eye Icon */}
                            <div className="space-y-2">
                                <Label htmlFor="password_confirmation">{t('_confirm_password', 'Confirm Password')}</Label>
                                <div className="relative">
                                    <Lock className="absolute start-3 top-2.5 h-4 w-4 text-muted-foreground" />
                                    <Input
                                        id="password_confirmation"
                                        type={showConfirmPassword ? "text" : "password"} 
                                        name="password_confirmation"
                                        placeholder="••••••••"
                                        value={data.password_confirmation}
                                        className="ps-9 pe-10" 
                                        autoComplete="new-password"
                                        onChange={(e) => setData('password_confirmation', e.target.value)}
                                        required
                                    />
                                    {/* Toggle Button */}
                                    <button
                                        type="button"
                                        onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                                        className="absolute end-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground transition-colors"
                                    >
                                        {showConfirmPassword ? (
                                            <EyeOff className="h-4 w-4" />
                                        ) : (
                                            <Eye className="h-4 w-4" />
                                        )}
                                        <span className="sr-only">
                                            {showConfirmPassword ? 'Hide password' : 'Show password'}
                                        </span>
                                    </button>
                                </div>
                                {errors.password_confirmation && (
                                    <p className="text-sm font-medium text-destructive">
                                        {errors.password_confirmation}
                                    </p>
                                )}
                            </div>

                            <Button className="w-full mt-4" disabled={processing}>
                                {processing ? (
                                    <>
                                        <Loader2 className="me-2 h-4 w-4 animate-spin" />
                                        {t('_creating_account', 'Creating account...')}
                                    </>
                                ) : (
                                    <>
                                        {t('_create_account', 'Create Account')}
                                        <ArrowRight className="ms-2 h-4 w-4" />
                                    </>
                                )}
                            </Button>
                        </form>
                    </CardContent>

                    <CardFooter className="flex justify-center border-t p-6 bg-muted/20">
                        <div className="text-sm text-muted-foreground">
                            {t('_auth_already_account', 'Already have an account?')}
                            {' '}
                            <Link 
                                href={route('login')} 
                                className="text-primary font-medium hover:underline underline-offset-4"
                            >
                                {t('_sign_in', 'Sign in')}
                            </Link>
                        </div>
                    </CardFooter>
                </Card>
            </div>
        </GuestLayout>
    );
}