import React from 'react';
import { Link, usePage } from '@inertiajs/react';
import { 
    Mail, 
    Globe, 
    FileText, 
    UserPlus, 
    Share2, 
    BrainCircuit, 
    Clock, 
    Languages, 
    Palette, 
    Code, 
    Server,
    Smartphone,
    Link2 
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { Separator } from '@/Components/ui/separator';

// --- DEFINITION OF SETTINGS TABS ---
const sidebarNavItems =[
    { 
        title: "SEO & Identity", 
        routeName: 'admin.settings.seo', 
        icon: Globe 
    },
    { 
        title: "Permalinks (URLs)", 
        routeName: 'admin.settings.permalinks', 
        icon: Link2 
    },
    { 
        title: "Appearance", 
        routeName: 'admin.settings.appearance', 
        icon: Palette 
    },
    {   
        title: "PWA Settings", 
        routeName: 'admin.settings.pwa', 
        icon: Smartphone 
    },
    { 
        title: "Code Injection", 
        routeName: 'admin.settings.code-injection', 
        icon: Code 
    },
    { 
        title: "Post Configuration", 
        routeName: 'admin.settings.post', 
        icon: FileText 
    },
    { 
        title: "Registration", 
        routeName: 'admin.settings.auth', 
        icon: UserPlus 
    },
    { 
        title: "SMTP / Mail", 
        routeName: 'admin.settings.smtp', 
        icon: Mail 
    },
    { 
        title: "Social Media", 
        routeName: 'admin.settings.social', 
        icon: Share2 
    },
    { 
        title: "AI Providers", 
        routeName: 'admin.settings.ai', 
        icon: BrainCircuit 
    },
    { 
        title: "Scheduler / Cron", 
        routeName: 'admin.settings.scheduler', 
        icon: Clock 
    },
    { 
        title: "Languages", 
        routeName: 'admin.settings.languages', 
        icon: Languages 
    },
    { 
        title: "System Maintenance", 
        routeName: 'admin.settings.maintenance', 
        icon: Server 
    },
];

export default function SettingsLayout({ children }) {
    return (
        <div className="space-y-6 block pb-16">
            <div className="space-y-0.5">
                <h2 className="text-2xl font-bold tracking-tight">System Settings</h2>
                <p className="text-muted-foreground">
                    Manage your application configuration, integrations, and localization.
                </p>
            </div>
            <Separator className="my-6" />
            
            <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
                <aside className="-mx-4 lg:w-1/5">
                    {/* Horizontal scroll for mobile, Vertical list for desktop */}
                    <nav className="flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1 overflow-x-auto lg:overflow-visible px-4 lg:px-0 pb-4 lg:pb-0 scrollbar-hide">
                        {sidebarNavItems.map((item) => {
                            // Check if current route matches
                            const isActive = route().current(item.routeName);
                            
                            return (
                                <Link
                                    key={item.title}
                                    href={route(item.routeName)}
                                    className={cn(
                                        "flex items-center gap-3 justify-start rounded-md p-2 text-sm font-medium transition-colors whitespace-nowrap",
                                        isActive
                                            ? "bg-muted text-primary font-bold shadow-sm"
                                            : "text-muted-foreground hover:bg-muted hover:text-foreground"
                                    )}
                                >
                                    <item.icon className={cn("h-4 w-4 shrink-0", isActive ? "text-primary" : "")} />
                                    {item.title}
                                </Link>
                            )
                        })}
                    </nav>
                </aside>
                
                {/* Main Content Area */}
                <div className="flex-1 lg:max-w-4xl">
                    {children}
                </div>
            </div>
        </div>
    );
}