import { Outlet, Link, useNavigate } from "react-router-dom"
import { useAuth } from "@/features/auth/authContext"
import { Button } from "@/components/ui/button"
import { ModeToggle } from "@/components/theme/mode-toggle"
import { LayoutDashboard, Users, Shield, LogOut, Settings, Menu, Tag as TagIcon, LayoutTemplate, User as UserIcon, Briefcase } from "lucide-react"

export default function DashboardLayout() {
    const { logout } = useAuth()
    const navigate = useNavigate()

    const handleLogout = () => {
        logout()
        navigate("/login")
    }

    return (
        <div className="flex h-screen bg-gray-100 dark:bg-gray-900">
            {/* Sidebar */}
            <aside className="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 hidden md:flex flex-col">
                <div className="p-6">
                    <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">GAuth Admin</h1>
                </div>
                <nav className="flex-1 px-4 space-y-2">
                    <Link to="/" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <LayoutDashboard className="w-5 h-5 mr-3" />
                        Panel
                    </Link>
                    <Link to="/users" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <Users className="w-5 h-5 mr-3" />
                        Kullanıcılar
                    </Link>
                    <Link to="/contacts" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <Users className="w-5 h-5 mr-3" />
                        İletişim (Kişiler)
                    </Link>
                    <Link to="/tags" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <TagIcon className="w-5 h-5 mr-3" />
                        Etiketler
                    </Link>
                    <Link to="/homes" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <LayoutTemplate className="w-5 h-5 mr-3" />
                        Home (Slider)
                    </Link>
                    <Link to="/about" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <UserIcon className="w-5 h-5 mr-3" />
                        Hakkımda
                    </Link>
                    <Link to="/services" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <Briefcase className="w-5 h-5 mr-3" />
                        Hizmetler
                    </Link>
                    <Link to="/resumes" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <Briefcase className="w-5 h-5 mr-3" />
                        Özgeçmiş (CV)
                    </Link>
                    <Link to="/cors" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <Shield className="w-5 h-5 mr-3" />
                        CORS Yönetimi
                    </Link>
                    <Link to="/ratelimit" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <Shield className="w-5 h-5 mr-3" />
                        Rate Limit
                    </Link>
                    <Link to="/main-menu" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <Menu className="w-5 h-5 mr-3" />
                        Ana Menü
                    </Link>
                    <Link to="/settings" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <Settings className="w-5 h-5 mr-3" />
                        Site Yönetimi
                    </Link>

                    <div className="pt-4 pb-1">
                        <p className="px-4 text-xs font-semibold text-gray-400 uppercase tracking-wider">
                            Blog Yönetimi
                        </p>
                    </div>

                    <Link to="/blog/categories" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <LayoutTemplate className="w-5 h-5 mr-3" />
                        Kategoriler
                    </Link>
                    <Link to="/blog/tags" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <TagIcon className="w-5 h-5 mr-3" />
                        Etiketler
                    </Link>
                    <Link to="/blog/posts" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <LayoutDashboard className="w-5 h-5 mr-3" />
                        Yazılar
                    </Link>
                    <Link to="/blog/comments" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <Briefcase className="w-5 h-5 mr-3" />
                        Yorumlar
                    </Link>
                    <Link to="/blog/views" className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                        <Shield className="w-5 h-5 mr-3" />
                        İstatistikler
                    </Link>
                </nav>
                <div className="p-4 border-t border-gray-200 dark:border-gray-700">
                    <Button variant="ghost" className="w-full justify-start text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/10" onClick={handleLogout}>
                        <LogOut className="w-5 h-5 mr-3" />
                        Çıkış Yap
                    </Button>
                </div>
            </aside>

            {/* Main Content */}
            <div className="flex-1 flex flex-col overflow-hidden">
                {/* Topbar */}
                <header className="h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-6">
                    <div className="md:hidden">
                        <Button variant="ghost" size="icon">
                            <Menu className="w-6 h-6" />
                        </Button>
                    </div>
                    <div className="ml-auto flex items-center space-x-4">
                        <ModeToggle />
                        {/* User menu placeholder */}
                        <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">
                            A
                        </div>
                    </div>
                </header>

                {/* Page Content */}
                <main className="flex-1 overflow-auto p-6">
                    <Outlet />
                </main>
            </div>
        </div>
    )
}
