import React from 'react';
import { Link, useForm, usePage } from '@inertiajs/react';
import { Transition } from '@headlessui/react';
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Button } from "@/Components/ui/button";
import { 
    Select, 
    SelectContent, 
    SelectItem, 
    SelectTrigger, 
    SelectValue 
} from "@/Components/ui/select";
import { Loader2, CheckCircle2, AtSign, Mail, User, MapPin, AlertCircle, Phone } from 'lucide-react';
import InputError from '@/Components/InputError';
import { useTranslation } from '@/hooks/useTranslation';

export default function UpdateProfileInformation({
    mustVerifyEmail,
    status,
    countries = [], 
    className = '',
}) {
    const user = usePage().props.auth.user;
    const { t } = useTranslation();

    const { data, setData, patch, errors, processing, recentlySuccessful } =
        useForm({
            name: user.name || '',
            email: user.email || '',
            username: user.username || '',
            phone: user.phone || '',
            country_id: user.country_id?.toString() || '',
        });

    const submit = (e) => {
        e.preventDefault();
        patch(route('profile.update'), {
            preserveScroll: true
        });
    };

    return (
        <section className={className}>
            <form onSubmit={submit} className="space-y-6">
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                        <Label htmlFor="name" className="text-sm font-bold flex items-center gap-2">
                            <User className="w-3.5 h-3.5 text-muted-foreground" /> {t('Full Name')}
                        </Label>
                        <Input
                            id="name"
                            className="bg-background border-input focus:ring-primary"
                            value={data.name}
                            onChange={(e) => setData('name', e.target.value)}
                            required
                            placeholder={t('John Doe')}
                        />
                        <InputError message={errors.name} />
                    </div>

                    <div className="space-y-2">
                        <Label htmlFor="username" className="text-sm font-bold flex items-center gap-2">
                            <AtSign className="w-3.5 h-3.5 text-muted-foreground" /> {t('Username')}
                        </Label>
                        <div className="relative">
                            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground font-mono text-sm">@</span>
                            <Input
                                id="username"
                                className="pl-8 bg-background border-input focus:ring-primary font-medium"
                                value={data.username}
                                onChange={(e) => setData('username', e.target.value.toLowerCase().replace(/\s+/g, ''))}
                                required
                                placeholder={t('johndoe123')}
                            />
                        </div>
                        <InputError message={errors.username} />
                    </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                        <Label htmlFor="email" className="text-sm font-bold flex items-center gap-2">
                            <Mail className="w-3.5 h-3.5 text-muted-foreground" /> {t('Email Address')}
                        </Label>
                        <Input
                            id="email"
                            type="email"
                            className="bg-background border-input focus:ring-primary"
                            value={data.email}
                            onChange={(e) => setData('email', e.target.value)}
                            required
                            placeholder={t('john@example.com')}
                        />
                        <InputError message={errors.email} />
                    </div>

                    <div className="space-y-2">
                        <Label htmlFor="phone" className="text-sm font-bold flex items-center gap-2">
                            <Phone className="w-3.5 h-3.5 text-muted-foreground" /> {t('Mobile Number')}
                        </Label>
                        <Input
                            id="phone"
                            type="tel"
                            className="bg-background border-input focus:ring-primary"
                            value={data.phone}
                            onChange={(e) => setData('phone', e.target.value)}
                            placeholder={t('+1 234 567 890')}
                        />
                        <InputError message={errors.phone} />
                    </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                        <Label htmlFor="country_id" className="text-sm font-bold flex items-center gap-2">
                            <MapPin className="w-3.5 h-3.5 text-muted-foreground" /> {t('Country / Region')}
                        </Label>
                        <Select 
                            value={data.country_id} 
                            onValueChange={(val) => setData('country_id', val)}
                        >
                            <SelectTrigger className="w-full bg-background border-input focus:ring-primary h-10">
                                <SelectValue placeholder={t('Select your country')} />
                            </SelectTrigger>
                            <SelectContent className="max-h-64">
                                {countries.map((c) => (
                                    <SelectItem key={c.id} value={c.id.toString()}>
                                        {c.name}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        <InputError message={errors.country_id} />
                    </div>
                </div>

                {mustVerifyEmail && user.email_verified_at === null && (
                    <div className="p-4 rounded-xl bg-amber-500/5 border border-amber-500/20 flex gap-3 items-start">
                        <AlertCircle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
                        <div>
                            <p className="text-sm font-semibold text-amber-700 dark:text-amber-500 leading-none">
                                {t('Email Unverified')}
                            </p>
                            <p className="text-xs text-amber-600/80 dark:text-amber-400/70 mt-1">
                                {t('Your email address is unverified.')}
                                <Link
                                    href={route('verification.send')}
                                    method="post"
                                    as="button"
                                    className="ml-1 underline font-bold hover:text-amber-800 dark:hover:text-amber-300 transition-colors"
                                >
                                    {t('Click here to re-send verification link.')}
                                </Link>
                            </p>
                            {status === 'verification-link-sent' && (
                                <div className="mt-2 text-xs font-bold text-green-600 bg-green-500/10 w-fit px-2 py-1 rounded">
                                    {t('✓ A new verification link has been sent.')}
                                </div>
                            )}
                        </div>
                    </div>
                )}

                <div className="flex items-center gap-4 pt-4 border-t border-border/50">
                    <Button 
                        type="submit" 
                        disabled={processing} 
                        size="lg"
                        className="px-8 font-bold shadow-md transition-all active:scale-95"
                    >
                        {processing ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
                        {t('Save Changes')}
                    </Button>

                    <Transition
                        show={recentlySuccessful}
                        enter="transition ease-in-out duration-300"
                        enterFrom="opacity-0 translate-x-4"
                        leave="transition ease-in-out duration-300"
                        leaveTo="opacity-0"
                    >
                        <p className="text-sm text-green-600 dark:text-green-500 flex items-center gap-1.5 font-bold">
                            <CheckCircle2 className="w-4 h-4" /> {t('Profile Updated Successfully')}
                        </p>
                    </Transition>
                </div>
            </form>
        </section>
    );
}