import { Link } from '@inertiajs/react';
import { 
    LayoutDashboard, 
    Users, 
    Settings, 
    ShieldCheck, 
    FileText, 
    FolderTree,
    Newspaper,
    Megaphone,
    Rss 
} from 'lucide-react';
import { cn } from '@/lib/utils';

export default function AdminSidebar({ className }) {
    return (
        <aside className={cn(
            // Base Layout: Flex Column, Background, Border
            "flex flex-col bg-background text-foreground border-r transition-all duration-300",
            
            // Mobile (Default): 100% height/width (fits inside Sheet)
            "h-full w-full",

            // Desktop (md+): Sticky, Screen Height, Fixed Width
            "md:h-screen md:sticky md:top-0 md:w-64",
            
            className
        )}>
            
            {/* --- HEADER: LOGO (Fixed Top) --- */}
            <div className="h-16 shrink-0 flex items-center px-6 border-b bg-background/95 backdrop-blur z-10">
                <ShieldCheck className="h-6 w-6 text-primary mr-2" />
                <span className="text-lg font-bold tracking-wider">
                    ADMIN<span className="text-primary">PANEL</span>
                </span>
            </div>

            {/* --- BODY: NAVIGATION (Scrollable) --- */}
            <nav className="flex-1 overflow-y-auto py-6 px-3 space-y-6 scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent">
                
                {/* --- GROUP 1: OVERVIEW --- */}
                <div>
                    <div className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                        Overview
                    </div>
                    <div className="space-y-1">
                        <NavLink 
                            href={route('admin.dashboard')} 
                            active={route().current('admin.dashboard')}
                            icon={LayoutDashboard}
                        >
                            Dashboard
                        </NavLink>
                    </div>
                </div>

                {/* --- GROUP 2: CONTENT MANAGEMENT --- */}
                <div>
                    <div className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                        Content Management
                    </div>
                    <div className="space-y-1">
                        <NavLink 
                            href={route('admin.news.index')} 
                            active={route().current('admin.news.*')} 
                            icon={Newspaper}
                        >
                            News Articles
                        </NavLink>

                        <NavLink 
                            href={route('admin.categories.index')} 
                            active={route().current('admin.categories.*')} 
                            icon={FolderTree}
                        >
                            Categories
                        </NavLink>

                        <NavLink 
                            href={route('admin.rss.index')} 
                            active={route().current('admin.rss.*')} 
                            icon={Rss}
                        >
                            RSS Crawler
                        </NavLink>

                        <NavLink 
                            href={route('admin.pages.index')} 
                            active={route().current('admin.pages.*')} 
                            icon={FileText}
                        >
                            Static Pages
                        </NavLink>
                    </div>
                </div>

                {/* --- GROUP 3: MARKETING --- */}
                <div>
                    <div className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                        Marketing
                    </div>
                    <div className="space-y-1">
                        <NavLink 
                            href={route('admin.ads.index')} 
                            active={route().current('admin.ads.*')} 
                            icon={Megaphone}
                        >
                            Ad Placements
                        </NavLink>
                    </div>
                </div>

                {/* --- GROUP 4: SYSTEM --- */}
                <div>
                    <div className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                        System
                    </div>
                    <div className="space-y-1">
                        <NavLink 
                            href={route('admin.users.index')} 
                            active={route().current('admin.users.*')} 
                            icon={Users}
                        >
                            User Management
                        </NavLink>

                        <NavLink 
                            href={route('admin.settings.seo')} 
                            active={route().current('admin.settings.*')} 
                            icon={Settings}
                        >
                            Settings
                        </NavLink>
                    </div>
                </div>

            </nav>

            {/* --- FOOTER: VERSION INFO (Fixed Bottom) --- */}
            <div className="p-4 border-t bg-muted/20 text-center shrink-0 mt-auto">
                <div className="text-xs font-mono font-semibold text-muted-foreground mb-1">
                    V1.0.7
                </div>
                <div className="text-[10px] text-muted-foreground/70">
                    TitanNews &copy; {new Date().getFullYear()}
                    <br />
                    All Rights Reserved
                </div>
            </div>
        </aside>
    );
}

// Helper Component for Links
function NavLink({ href, active, icon: Icon, children }) {
    return (
        <Link
            href={href}
            className={cn(
                "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200",
                active 
                    ? "bg-primary text-primary-foreground shadow-md translate-x-1" 
                    : "text-muted-foreground hover:bg-muted hover:text-foreground hover:translate-x-1"
            )}
        >
            <Icon className={cn("h-4 w-4 shrink-0", active ? "text-primary-foreground" : "text-muted-foreground")} />
            <span className="truncate">{children}</span>
        </Link>
    );
}