import React from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import { ThemeProvider, useTheme } from "@/Components/ThemeProvider";
import { Button } from "@/Components/ui/button";
import { Card } from "@/Components/ui/card";
import { LogOut, Sun, Moon, ArrowLeft } from "lucide-react";
import { ScrollArea, ScrollBar } from "@/Components/ui/scroll-area";
import Logo from '@/Components/Logo'; 
import { useTranslation } from '@/hooks/useTranslation';

function ThemeToggle() {
    const { theme, setTheme } = useTheme();
    return (
        <Button 
            variant="ghost" 
            size="icon" 
            onClick={() => setTheme(theme === "light" ? "dark" : "light")} 
            className="rounded-full"
        >
            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
            <span className="sr-only">Toggle theme</span>
        </Button>
    );
}

export default function SettingsLayout({ 
    children, 
    title = "Settings", 
    description = "", 
    navigation = [], 
    backRoute = "home" 
}) {
    const { auth } = usePage().props;
    const { t } = useTranslation();
    const user = auth?.user;

    return (
        <ThemeProvider defaultTheme="system" storageKey="app-ui-theme">
            <Head title={t(title)} />
            <div className="min-h-screen bg-muted/20 text-foreground transition-colors duration-300 pb-12 md:pb-0 font-sans">
                
                <nav className="border-b bg-card sticky top-0 z-50 shadow-sm">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="flex justify-between h-14 sm:h-16 items-center">
                            
                            <div className="flex items-center gap-3">
                                <Button variant="ghost" size="icon" asChild className="rounded-full h-8 w-8 shrink-0">
                                    <Link href={route(backRoute)}>
                                        <ArrowLeft className="h-5 w-5 rtl:rotate-180" />
                                    </Link>
                                </Button>

                                <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity outline-none">
                                    {/* OPTIMIZED LOGO COMPONENT */}
                                    <Logo className="w-[100px] h-[50px] sm:w-[120px] sm:h-[60px]" />
                                </Link>
                            </div>
                            
                            <div className="flex items-center gap-2 sm:gap-4">
                                <ThemeToggle />
                                
                                {user?.role === 'admin' && (
                                    <Button variant="outline" size="sm" asChild className="hidden sm:inline-flex">
                                        <Link href={route('cp.dashboard')}>{t('Admin Panel')}</Link>
                                    </Button>
                                )}

                                <Button 
                                    variant="destructive" 
                                    size="sm" 
                                    asChild 
                                    className="gap-2 rounded-full sm:rounded-md h-8 w-8 sm:h-9 sm:w-auto p-0 sm:px-3"
                                >
                                    <Link href={route('logout')} method="post" as="button">
                                        <LogOut className="w-4 h-4 rtl:rotate-180" />
                                        <span className="hidden sm:inline">{t('Logout')}</span>
                                    </Link>
                                </Button>
                            </div>
                        </div>
                    </div>
                </nav>

                <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
                    
                    <div className="mb-6">
                        <h1 className="text-2xl font-bold tracking-tight">{t(title)}</h1>
                        {description && <p className="text-muted-foreground text-sm mt-1">{t(description)}</p>}
                    </div>

                    <div className="flex flex-col md:flex-row gap-6 items-start">
                        
                        {navigation.length > 0 && (
                            <div className="md:hidden w-full -mx-4 px-4">
                                <ScrollArea className="w-full whitespace-nowrap">
                                    <div className="flex w-max space-x-2 pb-3">
                                        {navigation.map((item) => {
                                            const isActive = route().current(item.routeName);
                                            return (
                                                <Button 
                                                    key={item.routeName}
                                                    variant={isActive ? "secondary" : "outline"} 
                                                    size="sm"
                                                    asChild
                                                    className={`gap-2 rounded-full border-border/50 ${isActive ? 'bg-primary/10 text-primary border-primary/20' : 'text-muted-foreground bg-card'}`}
                                                >
                                                    <Link href={route(item.routeName)}>
                                                        {item.icon && <item.icon className="w-4 h-4 shrink-0" />}
                                                        {t(item.name)}
                                                    </Link>
                                                </Button>
                                            );
                                        })}
                                    </div>
                                    <ScrollBar orientation="horizontal" className="hidden" />
                                </ScrollArea>
                            </div>
                        )}

                        {navigation.length > 0 && (
                            <Card className="hidden md:flex w-64 flex-shrink-0 p-2 bg-card border-none shadow-sm sticky top-24">
                                <nav className="flex flex-col gap-1 w-full">
                                    {navigation.map((item) => {
                                        const isActive = route().current(item.routeName);
                                        return (
                                            <Button 
                                                key={item.routeName}
                                                variant={isActive ? "secondary" : "ghost"} 
                                                asChild
                                                className={`w-full justify-start gap-3 rounded-xl ${isActive ? 'bg-primary/10 text-primary hover:bg-primary/15' : 'text-muted-foreground'}`}
                                            >
                                                <Link href={route(item.routeName)}>
                                                    {item.icon && <item.icon className={`w-4 h-4 shrink-0 ${isActive ? 'text-primary' : ''}`} />}
                                                    {t(item.name)}
                                                </Link>
                                            </Button>
                                        );
                                    })}
                                </nav>
                            </Card>
                        )}

                        <div className="flex-1 w-full space-y-6 min-w-0">
                            {children}
                        </div>

                    </div>
                </main>
            </div>
        </ThemeProvider>
    );
}