import { useState } from 'react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';
import DeleteUserForm from './Partials/DeleteUserForm';
import UpdatePasswordForm from './Partials/UpdatePasswordForm';
import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm';
import { User, Lock, Trash2, ShieldCheck, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Separator } from '@/Components/ui/separator';
import useTranslation from '@/hooks/useTranslation'; 

export default function Edit({ mustVerifyEmail, status }) {
    const { t } = useTranslation(); 
    const [activeTab, setActiveTab] = useState('profile');

    // Menu items now use translation function 't'
    const menuItems = [
        { 
            id: 'profile', 
            label: t('_general_profile', 'General Profile'), 
            icon: User, 
            description: t('_manage_public_profile', 'Manage your public profile and bio.') 
        },
        { 
            id: 'password', 
            label: t('_security', 'Security'), 
            icon: Lock, 
            description: t('_update_password_settings', 'Update your password and security settings.') 
        },
        { 
            id: 'danger', 
            label: t('_delete_account', 'Delete Account'), 
            icon: Trash2, 
            description: t('_permanently_remove_account', 'Permanently remove your account.'), 
            variant: 'destructive' 
        },
    ];

    return (
        <AuthenticatedLayout>
            <Head title={t('_account_settings', 'Account Settings')} />

            {/* Adjusted padding for mobile (px-4) vs desktop */}
            <div className="max-w-6xl mx-auto py-6 px-4 sm:px-6 space-y-6 md:space-y-8 animate-in fade-in duration-700">
                
                {/* Header Section */}
                <div className="flex flex-col gap-2">
                    <h2 className="text-2xl md:text-3xl font-bold tracking-tight flex items-center gap-2">
                        {t('_account_settings', 'Account Settings')} <Sparkles className="w-5 h-5 text-yellow-500 fill-yellow-500" />
                    </h2>
                    <p className="text-muted-foreground text-sm md:text-lg">
                        {t('_account_settings_desc', 'Manage your personal information and account preferences.')}
                    </p>
                </div>
                
                <Separator className="my-4 md:my-6" />

                <div className="flex flex-col lg:flex-row gap-6 lg:gap-12">
                    
                    {/* Navigation Sidebar 
                        Mobile: Horizontal scrollable strip
                        Desktop: Vertical sticky sidebar
                    */}
                    <aside className="lg:w-1/4 shrink-0 w-full">
                        <nav className="flex flex-row lg:flex-col gap-2 overflow-x-auto lg:overflow-visible pb-2 lg:pb-0 lg:sticky lg:top-24 scrollbar-hide">
                            {menuItems.map((item) => {
                                const Icon = item.icon;
                                const isActive = activeTab === item.id;
                                const isDestructive = item.variant === 'destructive';
                                
                                return (
                                    <button
                                        key={item.id}
                                        onClick={() => setActiveTab(item.id)}
                                        className={cn(
                                            // RTL Fix: text-left -> text-start
                                            "flex items-center gap-3 px-3 py-2 md:px-4 md:py-3 text-sm font-medium rounded-lg transition-all duration-200 text-start group whitespace-nowrap lg:whitespace-normal min-w-max lg:min-w-0",
                                            isActive 
                                                ? (isDestructive ? "bg-red-100 text-red-900 dark:bg-red-900/30 dark:text-red-200" : "bg-primary text-primary-foreground shadow-md scale-[1.02]")
                                                : "text-muted-foreground hover:bg-muted hover:text-foreground bg-muted/50 lg:bg-transparent"
                                        )}
                                    >
                                        <div className={cn(
                                            "p-1.5 md:p-2 rounded-full transition-colors",
                                            isActive ? "bg-white/20" : "bg-background lg:bg-muted group-hover:bg-background"
                                        )}>
                                            <Icon className={cn("h-4 w-4", isDestructive && !isActive ? "text-red-500" : "")} />
                                        </div>
                                        <div className="flex flex-col">
                                            <span className="font-bold text-sm">{item.label}</span>
                                            {/* Description hidden on mobile to save space */}
                                            <span className={cn("text-xs opacity-80 font-normal hidden md:block", isActive ? "text-white/80" : "text-muted-foreground")}>
                                                {item.description}
                                            </span>
                                        </div>
                                    </button>
                                );
                            })}
                        </nav>
                    </aside>

                    {/* Content Area */}
                    <div className="flex-1 lg:max-w-3xl space-y-6 pb-20">
                        {activeTab === 'profile' && (
                            <div className="animate-in slide-in-from-bottom-4 fade-in duration-500">
                                <div className="mb-4 md:mb-6">
                                    <h3 className="text-lg md:text-xl font-semibold mb-1 flex items-center gap-2">
                                        {t('_public_profile', 'Public Profile')}
                                    </h3>
                                    <p className="text-sm text-muted-foreground">
                                        {t('_public_profile_desc', 'This information will be displayed publicly on your author page.')}
                                    </p>
                                </div>
                                <UpdateProfileInformationForm
                                    mustVerifyEmail={mustVerifyEmail}
                                    status={status}
                                    className="bg-card border rounded-xl shadow-sm overflow-hidden"
                                />
                            </div>
                        )}

                        {activeTab === 'password' && (
                            <div className="animate-in slide-in-from-bottom-4 fade-in duration-500">
                                <div className="mb-4 md:mb-6">
                                    <h3 className="text-lg md:text-xl font-semibold mb-1 flex items-center gap-2">
                                        <ShieldCheck className="w-5 h-5 text-primary" /> {t('_password_security', 'Password & Security')}
                                    </h3>
                                    <p className="text-sm text-muted-foreground">
                                        {t('_password_security_desc', 'Ensure your account is using a long, random password to stay secure.')}
                                    </p>
                                </div>
                                <UpdatePasswordForm 
                                    className="bg-card border rounded-xl shadow-sm overflow-hidden" 
                                />
                            </div>
                        )}

                        {activeTab === 'danger' && (
                            <div className="animate-in slide-in-from-bottom-4 fade-in duration-500">
                                <div className="mb-4 md:mb-6">
                                    <h3 className="text-lg md:text-xl font-semibold mb-1 text-red-600">{t('_danger_zone', 'Danger Zone')}</h3>
                                    <p className="text-sm text-muted-foreground">
                                        {t('_danger_zone_desc', 'Irreversible actions regarding your account data.')}
                                    </p>
                                </div>
                                <div className="border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-950/10 rounded-xl p-1 shadow-sm">
                                    <DeleteUserForm className="bg-transparent border-0 shadow-none" />
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}