"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { LayoutDashboard, Package, ShoppingCart, Settings, Globe, Tags, Users, MessageSquare, History } from "lucide-react"

const sidebarItems = [
    {
        title: "Panel",
        href: "/dashboard",
        icon: LayoutDashboard,
    },
    {
        title: "Ürünler",
        href: "/dashboard/products",
        icon: Package,
    },
    {
        title: "Kategoriler",
        href: "/dashboard/categories",
        icon: Tags,
    },
    {
        title: "Siparişler",
        href: "/dashboard/orders",
        icon: ShoppingCart,
    },
    {
        title: "Müşteriler",
        href: "/dashboard/customers",
        icon: Users,
    },
    {
        title: "SMS Gönder",
        href: "/dashboard/sms",
        icon: MessageSquare,
    },
    {
        title: "Ayarlar",
        href: "/dashboard/settings",
        icon: Settings,
    },
    {
        title: "Siteye Dön",
        href: "/",
        icon: Globe,
    },
]

type SidebarProps = React.HTMLAttributes<HTMLDivElement>

export function Sidebar({ className }: SidebarProps) {
    const pathname = usePathname()

    return (
        <div className={cn("pb-12", className)}>
            <div className="space-y-4 py-4">
                <div className="px-3 py-2">
                    <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
                        Yönetim
                    </h2>
                    <div className="space-y-1">
                        {sidebarItems.filter(i => !i.href.includes('/sms')).map((item) => (
                            <Link
                                key={item.href}
                                href={item.href}
                                className={cn(
                                    "flex items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors",
                                    pathname === item.href ? "bg-slate-100 dark:bg-slate-800 text-primary" : "text-slate-500 dark:text-slate-400"
                                )}
                            >
                                <item.icon className="mr-2 h-4 w-4" />
                                {item.title}
                            </Link>
                        ))}
                    </div>
                </div>

                <div className="px-3 py-2">
                    <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
                        SMS
                    </h2>
                    <div className="space-y-1">
                        <Link
                            href="/dashboard/sms"
                            className={cn(
                                "flex items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors",
                                pathname === "/dashboard/sms" ? "bg-slate-100 dark:bg-slate-800 text-primary" : "text-slate-500 dark:text-slate-400"
                            )}
                        >
                            <MessageSquare className="mr-2 h-4 w-4" />
                            Yeni SMS
                        </Link>
                        <Link
                            href="/dashboard/sms/logs"
                            className={cn(
                                "flex items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors",
                                pathname === "/dashboard/sms/logs" ? "bg-slate-100 dark:bg-slate-800 text-primary" : "text-slate-500 dark:text-slate-400"
                            )}
                        >
                            <History className="mr-2 h-4 w-4" />
                            Geçmiş
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    )
}