import React from 'react';
import { Link, usePage, router } from '@inertiajs/react';
import { 
    DropdownMenu, 
    DropdownMenuContent, 
    DropdownMenuItem, 
    DropdownMenuSeparator, 
    DropdownMenuTrigger,
    DropdownMenuSub,
    DropdownMenuSubContent,
    DropdownMenuSubTrigger,
    DropdownMenuPortal
} from "@/Components/ui/dropdown-menu";
import { User, ShieldCheck, Globe, Banknote, Check } from "lucide-react"; 
import { useTranslation } from '@/hooks/useTranslation';

export default function ProfileMenu() {
    // --- UPDATED: Added availableLanguages to destructuring ---
    const { auth, activeCurrency, currencies, locale, appSettings, availableLanguages = [] } = usePage().props;
    const { t } = useTranslation();
    const user = auth?.user;

    return (
        <DropdownMenu>
            <DropdownMenuTrigger className="flex flex-col items-center justify-center hover:text-primary transition-colors outline-none px-2">
                <User className="h-[22px] w-[22px]" strokeWidth={1.5} />
            </DropdownMenuTrigger>
            
            <DropdownMenuContent align="end" className="w-64 p-1 rounded-xl shadow-lg border-border/50 mt-2 bg-card z-[9999]">
                
                {user ? (
                    <>
                        <div className="px-3 py-3">
                            <span className="font-bold text-[15px] text-foreground">
                                {t('Hi, :name', { name: user.name })}
                            </span>
                            <span className="block text-xs text-muted-foreground truncate">{user.email}</span>
                        </div>
                        <DropdownMenuSeparator className="mx-2 bg-border/50" />
                    </>
                ) : (
                    <>
                        <div className="px-3 py-3">
                            <span className="font-bold text-[15px] text-foreground">{t('Welcome to')} {appSettings?.name || 'Marketplace'}</span>
                            <span className="block text-xs text-muted-foreground">{t('Sign in to manage your account')}</span>
                        </div>
                        <DropdownMenuSeparator className="mx-2 bg-border/50" />
                        
                        <div className="py-1">
                            <DropdownMenuItem asChild className="cursor-pointer px-3 py-2.5 text-[14px] hover:bg-muted/50 rounded-md">
                                <Link href={route('login')} className="font-bold text-primary">{t('Log In')}</Link>
                            </DropdownMenuItem>
                            <DropdownMenuItem asChild className="cursor-pointer px-3 py-2.5 text-[14px] hover:bg-muted/50 rounded-md">
                                <Link href={route('register')}>{t('Create Account')}</Link>
                            </DropdownMenuItem>
                        </div>
                        <DropdownMenuSeparator className="mx-2 bg-border/50" />
                    </>
                )}

                {/* --- MOBILE ONLY: LANGUAGE & CURRENCY SWITCHER --- */}
                <div className="lg:hidden py-1">
                    <div className="px-3 py-1.5 text-xs font-bold text-muted-foreground uppercase tracking-wider">
                        {t('Preferences')}
                    </div>
                    
                    {/* Language Sub-menu */}
                    {availableLanguages.length > 0 && (
                        <DropdownMenuSub>
                            <DropdownMenuSubTrigger className="cursor-pointer px-3 py-2.5 text-[14px] hover:bg-muted/50 rounded-md">
                                <Globe className="w-4 h-4 mr-2 text-muted-foreground" />
                                <span className="flex-1">{t('Language')}</span>
                                <span className="text-xs font-bold text-muted-foreground uppercase">{locale}</span>
                            </DropdownMenuSubTrigger>
                            <DropdownMenuPortal>
                                <DropdownMenuSubContent className="z-[9999] rounded-xl shadow-lg ml-1">
                                    {/* --- UPDATED: Map through dynamic database languages --- */}
                                    {availableLanguages.map((lang) => (
                                        <DropdownMenuItem 
                                            key={lang.code}
                                            onClick={() => router.get(route('language.switch', lang.code))}
                                            className={`cursor-pointer px-3 py-2 text-[14px] flex items-center justify-between ${locale === lang.code ? 'font-bold text-primary bg-primary/5' : ''}`}
                                        >
                                            {lang.name}
                                            {locale === lang.code && <Check className="w-4 h-4 text-primary" />}
                                        </DropdownMenuItem>
                                    ))}
                                </DropdownMenuSubContent>
                            </DropdownMenuPortal>
                        </DropdownMenuSub>
                    )}

                    {/* Currency Sub-menu */}
                    <DropdownMenuSub>
                        <DropdownMenuSubTrigger className="cursor-pointer px-3 py-2.5 text-[14px] hover:bg-muted/50 rounded-md">
                            <Banknote className="w-4 h-4 mr-2 text-muted-foreground" />
                            <span className="flex-1">{t('Currency')}</span>
                            <span className="text-xs font-bold text-muted-foreground uppercase">{activeCurrency?.code || 'USD'}</span>
                        </DropdownMenuSubTrigger>
                        <DropdownMenuPortal>
                            <DropdownMenuSubContent className="z-[9999] rounded-xl shadow-lg ml-1 max-h-64 overflow-y-auto no-scrollbar">
                                {currencies?.map((c) => (
                                    <DropdownMenuItem 
                                        key={c.code}
                                        onClick={() => router.get(route('currency.switch', c.code))}
                                        className={`cursor-pointer px-3 py-2 text-[14px] flex items-center justify-between ${activeCurrency?.code === c.code ? 'font-bold text-primary bg-primary/5' : ''}`}
                                    >
                                        <span>{c.code} ({c.symbol})</span>
                                        {activeCurrency?.code === c.code && <Check className="w-4 h-4 text-primary" />}
                                    </DropdownMenuItem>
                                ))}
                            </DropdownMenuSubContent>
                        </DropdownMenuPortal>
                    </DropdownMenuSub>
                    
                    <DropdownMenuSeparator className="mx-2 bg-border/50" />
                </div>
                {/* --- END MOBILE ONLY SECTION --- */}

                {user && (
                    <>
                        <div className="py-1">
                            {user.role === 'admin' && (
                                <DropdownMenuItem asChild className="cursor-pointer px-3 py-2.5 text-[14px] hover:bg-primary/10 text-primary font-bold rounded-md focus:bg-primary/10">
                                    <Link href={route('cp.dashboard')}>
                                        <ShieldCheck className="w-4 h-4 mr-2 inline-block" />
                                        {t('Admin Panel')}
                                    </Link>
                                </DropdownMenuItem>
                            )}

                            <DropdownMenuItem asChild className="cursor-pointer px-3 py-2.5 text-[14px] hover:bg-muted/50 rounded-md focus:bg-muted/50">
                                <Link href={route('dashboard')}>{t('My Dashboard')}</Link>
                            </DropdownMenuItem>
                            
                            <DropdownMenuItem asChild className="cursor-pointer px-3 py-2.5 text-[14px] hover:bg-muted/50 rounded-md focus:bg-muted/50">
                                <Link href={route('buyer.orders.index')}>{t('Orders')}</Link>
                            </DropdownMenuItem>
                            
                            <DropdownMenuItem asChild className="cursor-pointer px-3 py-2.5 text-[14px] hover:bg-muted/50 rounded-md focus:bg-muted/50">
                                <Link href={route('chat.index')}>{t('Messages')}</Link>
                            </DropdownMenuItem>
                            
                            <DropdownMenuItem asChild className="cursor-pointer px-3 py-2.5 text-[14px] hover:bg-muted/50 rounded-md focus:bg-muted/50">
                                <Link href={route('buyer.favorites.index')}>{t('Favorites')}</Link>
                            </DropdownMenuItem>
                            
                            <DropdownMenuItem asChild className="cursor-pointer px-3 py-2.5 text-[14px] hover:bg-muted/50 rounded-md focus:bg-muted/50">
                                <Link href={route('settings.profile')}>{t('Account')}</Link>
                            </DropdownMenuItem>
                        </div>

                        <DropdownMenuSeparator className="mx-2 bg-border/50" />
                        
                        <div className="py-1">
                            <DropdownMenuItem asChild className="cursor-pointer px-3 py-2.5 text-[14px] hover:bg-muted/50 rounded-md focus:bg-muted/50 text-destructive hover:text-destructive">
                                <Link href={route('logout')} method="post" as="button" className="w-full text-left">
                                    {t('Sign out')}
                                </Link>
                            </DropdownMenuItem>
                        </div>
                    </>
                )}
                
            </DropdownMenuContent>
        </DropdownMenu>
    );
}