"use client"

import { Home, Users, Settings, LogOut, Shield } from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"

import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarHeader,
} from "@/components/ui/sidebar"
import { useAppDispatch, useAppSelector } from "@/lib/hooks"
import { logout } from "@/lib/features/auth/authSlice"

// Menu items.
const items = [
    {
        title: "Genel Bakış",
        url: "/admin",
        icon: Home,
    },
    {
        title: "Kullanıcılar",
        url: "/admin/users",
        icon: Users,
    },
    {
        title: "Ayarlar",
        url: "/admin/settings",
        icon: Settings,
    },
    {
        title: "CORS Ayarları",
        url: "/admin/cors",
        icon: Shield,
    },
]

export function AppSidebar() {
    const pathname = usePathname()
    const dispatch = useAppDispatch()
    const user = useAppSelector((state) => state.auth.user)
    const isAdmin = user?.roles?.some((r: any) => r.name === "admin")

    return (
        <Sidebar className="top-14 h-[calc(100svh-3.5rem)]">
            <SidebarHeader className="p-4 md:hidden">
                <Link href="/" className="font-bold text-lg">NextGoBlog</Link>
            </SidebarHeader>
            <SidebarContent>
                {isAdmin && (
                    <SidebarGroup>
                        <SidebarGroupLabel>Admin Panel</SidebarGroupLabel>
                        <SidebarGroupContent>
                            <SidebarMenu>
                                {items.map((item) => (
                                    <SidebarMenuItem key={item.title}>
                                        <SidebarMenuButton asChild isActive={pathname === item.url}>
                                            <Link href={item.url}>
                                                <item.icon />
                                                <span>{item.title}</span>
                                            </Link>
                                        </SidebarMenuButton>
                                    </SidebarMenuItem>
                                ))}
                            </SidebarMenu>
                        </SidebarGroupContent>
                    </SidebarGroup>
                )}

                <SidebarGroup>
                    <SidebarGroupLabel>Hesabım</SidebarGroupLabel>
                    <SidebarGroupContent>
                        <SidebarMenu>
                            <SidebarMenuItem>
                                <SidebarMenuButton asChild isActive={pathname === "/profile"}>
                                    <Link href="/profile">
                                        <Users className="h-4 w-4" />
                                        <span>Profilim</span>
                                    </Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        </SidebarMenu>
                    </SidebarGroupContent>
                </SidebarGroup>
            </SidebarContent>
            <SidebarFooter>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton onClick={() => dispatch(logout())}>
                            <LogOut />
                            <span>Çıkış Yap</span>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarFooter>
        </Sidebar>
    )
}