import { useForm, usePage, router } from '@inertiajs/react';
import AppLayout from '@/layouts/AppLayout';
import { useState } from 'react';
import { useTranslator } from '@/lib/i18n';

export default function Profile() {
    const t = useTranslator();
    const { auth } = usePage<any>().props;
    const [emailSent, setEmailSent] = useState(false);

    const nameForm = useForm({ name: auth.user?.name ?? '' });
    const passForm = useForm({ current_password: '', new_password: '', new_password_confirmation: '' });
    const emailForm = useForm({ new_email: '' });

    function saveName(e: React.FormEvent) {
        e.preventDefault();
        nameForm.patch('/profile/name', { preserveScroll: true });
    }

    function savePassword(e: React.FormEvent) {
        e.preventDefault();
        passForm.patch('/profile/password', {
            onSuccess: () => passForm.reset(),
            preserveScroll: true,
        });
    }

    function changeEmail(e: React.FormEvent) {
        e.preventDefault();
        emailForm.post('/profile/change-email', {
            onSuccess: () => setEmailSent(true),
            preserveScroll: true,
        });
    }

    return (
        <AppLayout>
            <div className="max-w-2xl mx-auto px-6 py-10">
                <div className="flex items-center gap-3 mb-8">
                    <button onClick={() => router.visit(-1 as any)} className="text-muted-foreground hover:text-foreground">← {t('common.back')}</button>
                    <h1 className="font-serif text-3xl">{t('profile.title')}</h1>
                </div>

                {/* Name */}
                <div className="bg-card border border-border rounded-xl p-6 mb-4">
                    <h2 className="font-semibold mb-4">{t('profile.display_name')}</h2>
                    <form onSubmit={saveName} className="flex gap-3">
                        <input type="text" value={nameForm.data.name} onChange={e => nameForm.setData('name', e.target.value)} className="flex-1 border border-border rounded-lg px-3 py-2 text-sm" required />
                        <button type="submit" disabled={nameForm.processing} className="bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm">{t('common.save')}</button>
                    </form>
                    {nameForm.errors.name && <p className="text-red-500 text-xs mt-1">{nameForm.errors.name}</p>}
                </div>

                {/* Password */}
                <div className="bg-card border border-border rounded-xl p-6 mb-4">
                    <h2 className="font-semibold mb-4">{t('profile.change_password')}</h2>
                    <form onSubmit={savePassword} className="space-y-3">
                        <div>
                            <label className="block text-sm font-medium mb-1">{t('profile.current_password')}</label>
                            <input type="password" value={passForm.data.current_password} onChange={e => passForm.setData('current_password', e.target.value)} className="w-full border border-border rounded-lg px-3 py-2 text-sm" required />
                            {passForm.errors.current_password && <p className="text-red-500 text-xs mt-1">{passForm.errors.current_password}</p>}
                        </div>
                        <div>
                            <label className="block text-sm font-medium mb-1">{t('profile.new_password')}</label>
                            <input type="password" value={passForm.data.new_password} onChange={e => passForm.setData('new_password', e.target.value)} className="w-full border border-border rounded-lg px-3 py-2 text-sm" required />
                            {passForm.errors.new_password && <p className="text-red-500 text-xs mt-1">{passForm.errors.new_password}</p>}
                        </div>
                        <div>
                            <label className="block text-sm font-medium mb-1">{t('profile.confirm_new_password')}</label>
                            <input type="password" value={passForm.data.new_password_confirmation} onChange={e => passForm.setData('new_password_confirmation', e.target.value)} className="w-full border border-border rounded-lg px-3 py-2 text-sm" required />
                        </div>
                        <button type="submit" disabled={passForm.processing} className="bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm">
                            {t('profile.change_password')}
                        </button>
                    </form>
                </div>

                {/* Email */}
                <div className="bg-card border border-border rounded-xl p-6">
                    <h2 className="font-semibold mb-1">{t('profile.email_address')}</h2>
                    <p className="text-sm text-muted-foreground mb-4">{t('profile.current_email', { email: auth.user?.email })}</p>
                    {emailSent ? (
                        <div className="bg-green-50 border border-green-200 rounded-lg p-4 text-sm text-green-800">
                            {t('profile.verification_sent')}
                        </div>
                    ) : (
                        <form onSubmit={changeEmail} className="flex gap-3">
                            <input type="email" value={emailForm.data.new_email} onChange={e => emailForm.setData('new_email', e.target.value)} placeholder={t('profile.new_email_placeholder')} className="flex-1 border border-border rounded-lg px-3 py-2 text-sm" required />
                            <button type="submit" disabled={emailForm.processing} className="bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm">{t('profile.send_verification')}</button>
                        </form>
                    )}
                    {emailForm.errors.new_email && <p className="text-red-500 text-xs mt-1">{emailForm.errors.new_email}</p>}
                </div>
            </div>
        </AppLayout>
    );
}