import { useState } from 'react';
import { Link, usePage } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { Toaster } from '@/Components/ui/sonner'; 
import ThemeToggle from '@/Components/ThemeToggle';
import NotificationMenu from '@/Components/NotificationMenu';
import SiteLogo from '@/Components/SiteLogo';
import useFlashMessages from '@/hooks/useFlashMessages';
import useTranslation from '@/hooks/useTranslation';
import { 
    LayoutDashboard, 
    Settings, 
    LogOut, 
    Menu, 
    PenTool,
    Newspaper
} from 'lucide-react';
import { cn } from '@/lib/utils';
// Import Sheet components
import { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetDescription } from "@/components/ui/sheet";

export default function AuthenticatedLayout({ children }) {
    useFlashMessages();
    const { t } = useTranslation();

    const { auth } = usePage().props;

    // This state is now used to control the Sheet component
    const [showingSidebar, setShowingSidebar] = useState(false);

    return (
        <div className="min-h-screen bg-muted/40 text-foreground flex transition-colors duration-300">
            
            {/* Sidebar (Desktop) - No changes here except logo alignment */}
            <aside className="hidden md:flex flex-col w-64 bg-background border-e border-border min-h-screen fixed z-20 start-0">
                {/* CHANGED: justify-center to justify-start and adjusted padding to align left */}
                <div className="h-16 flex items-center justify-start border-b border-border px-6">
                    <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
                        <SiteLogo className="h-8 w-auto" />
                    </Link>
                </div>
                
                <nav className="flex-1 px-4 py-6 space-y-2">
                    <NavLink href={route('dashboard')} active={route().current('dashboard')} icon={LayoutDashboard}>
                        {t('_dashboard', 'Dashboard')}
                    </NavLink>
                    <NavLink href={route('news.submit')} active={route().current('news.submit')} icon={PenTool}>
                        {t('_submit_news', 'Submit News')}
                    </NavLink>
                    <NavLink href={route('my-posts.index')} active={route().current('my-posts.index')} icon={Newspaper}>
                        {t('_my_posts', 'My Posts')}
                    </NavLink>
                    <NavLink href={route('settings.edit')} active={route().current('settings.edit')} icon={Settings}>
                        {t('_profile', 'Settings')}
                    </NavLink>
                </nav>

                <div className="p-4 border-t border-border">
                    <Link href={route('logout')} method="post" as="button" className="flex items-center gap-3 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 w-full px-4 py-2 rounded-md transition-colors text-sm font-medium">
                        <LogOut size={20} />
                        <span>{t('_logout', 'Log Out')}</span>
                    </Link>
                </div>
            </aside>

            {/* Main Content Area */}
            <main className="flex-1 md:ms-64 w-full flex flex-col">
                
                {/* --- HEADER BAR (Sticky) --- */}
                <header className="h-16 border-b border-border bg-background/95 backdrop-blur px-4 md:px-8 flex items-center justify-between sticky top-0 z-10 gap-4">
                    
                    {/* Left: Mobile Toggle & Logo */}
                    <div className="flex items-center gap-4">
                        <div className="md:hidden flex items-center gap-2">
                            
                            {/* --- MOBILE SIDEBAR TRIGGER (UPDATED) --- */}
                            <Sheet open={showingSidebar} onOpenChange={setShowingSidebar}>
                                <SheetTrigger asChild>
                                    <Button variant="outline" size="icon">
                                        <Menu className="h-5 w-5" />
                                    </Button>
                                </SheetTrigger>
                                <SheetContent side="left" className="p-0 w-[280px] flex flex-col">
                                    <SheetTitle className="sr-only">Menu</SheetTitle>
                                    <SheetDescription className="sr-only">Main Navigation</SheetDescription>
                                    
                                    {/* CHANGED: Header inside Sheet - justify-center to justify-start */}
                                    <div className="h-16 flex items-center justify-start border-b border-border px-6">
                                        <Link href="/" onClick={() => setShowingSidebar(false)}>
                                            <SiteLogo className="h-8 w-auto" />
                                        </Link>
                                    </div>

                                    {/* Nav Links inside Sheet */}
                                    <nav className="flex-1 px-4 py-6 space-y-2">
                                        <NavLink href={route('dashboard')} active={route().current('dashboard')} icon={LayoutDashboard} onClick={() => setShowingSidebar(false)}>
                                            {t('_dashboard', 'Dashboard')}
                                        </NavLink>
                                        <NavLink href={route('news.submit')} active={route().current('news.submit')} icon={PenTool} onClick={() => setShowingSidebar(false)}>
                                            {t('_submit_news', 'Submit News')}
                                        </NavLink>
                                        <NavLink href={route('my-posts.index')} active={route().current('my-posts.index')} icon={Newspaper} onClick={() => setShowingSidebar(false)}>
                                            {t('_my_posts', 'My Posts')}
                                        </NavLink>
                                        <NavLink href={route('settings.edit')} active={route().current('settings.edit')} icon={Settings} onClick={() => setShowingSidebar(false)}>
                                            {t('_profile', 'Settings')}
                                        </NavLink>
                                    </nav>
                                    
                                    {/* Footer inside Sheet */}
                                    <div className="p-4 border-t border-border">
                                        <Link href={route('logout')} method="post" as="button" className="flex items-center gap-3 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 w-full px-4 py-2 rounded-md transition-colors text-sm font-medium">
                                            <LogOut size={20} />
                                            <span>{t('_logout', 'Log Out')}</span>
                                        </Link>
                                    </div>
                                </SheetContent>
                            </Sheet>
                            {/* --- END MOBILE SIDEBAR --- */}

                        </div>
                    </div>

                    {/* Spacer */}
                    <div className="flex-1"></div>

                    {/* Right: Notifications & Theme */}
                    <div className="flex items-center gap-2">
                        <NotificationMenu />
                        <ThemeToggle />
                    </div>
                </header>

                {/* --- PAGE CONTENT */}
                <div className="p-4 md:p-8 flex-1">
                    {children}
                </div>
            </main>

            <Toaster />
        </div>
    );
}

function NavLink({ href, active, icon: Icon, children, ...props }) {
    return (
        <Link 
            href={href} 
            className={cn(
                "flex items-center gap-3 px-4 py-2 rounded-md transition-colors font-medium text-sm",
                active 
                    ? "bg-primary text-primary-foreground shadow-sm" 
                    : "text-muted-foreground hover:bg-muted hover:text-foreground"
            )}
            {...props}
        >
            <Icon size={20} />
            <span>{children}</span>
        </Link>
    );
}