"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { LayoutDashboard, MessageSquare, FlaskConical, Cpu, Settings, FileText, Zap, HardDrive } from "lucide-react"

const nav = [
  { href: "/", label: "لوحة التحكم", icon: LayoutDashboard },
  { href: "/playground", label: "الملعب المباشر", icon: MessageSquare },
  { href: "/benchmark", label: "الاختبارات", icon: FlaskConical },
  { href: "/hardware", label: "مراقبة العتاد", icon: Cpu },
  { href: "/models", label: "إدارة النماذج", icon: HardDrive },
]

export function Sidebar() {
  const pathname = usePathname()
  return (
    <aside className="hidden lg:flex w-64 flex-col border-e bg-zinc-50/50 dark:bg-zinc-900/50 dark:border-zinc-800 h-screen sticky top-0">
      <div className="p-6 border-b dark:border-zinc-800">
        <div className="flex items-center gap-3">
          <div className="h-9 w-9 rounded-lg bg-gradient-to-br from-violet-600 to-indigo-600 flex items-center justify-center text-white font-bold text-sm">SS</div>
          <div>
            <h1 className="font-bold text-sm leading-none">Safetensors</h1>
            <p className="text-xs text-zinc-500">Studio & Bench</p>
          </div>
        </div>
        <div className="mt-3 flex items-center gap-2 text-xs text-zinc-500">
          <Zap className="h-3 w-3 text-amber-500"/> <span>v1.0 • Local AI</span>
        </div>
      </div>
      <nav className="flex-1 p-4 space-y-1">
        {nav.map(item => {
          const active = pathname === item.href
          return (
            <Link key={item.href} href={item.href} className={cn("flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors", active ? "bg-zinc-900 text-white dark:bg-zinc-50 dark:text-zinc-900" : "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800")}>
              <item.icon className="h-4 w-4"/>{item.label}
            </Link>
          )
        })}
      </nav>
      <div className="p-4 border-t dark:border-zinc-800">
        <div className="rounded-lg bg-gradient-to-br from-violet-600 to-indigo-600 p-4 text-white">
          <p className="text-sm font-medium">هل تحتاج مساعدة؟</p>
          <p className="text-xs opacity-80 mt-1">راجع الوثائق أو تواصل معنا</p>
          <a href="http://localhost:8000/docs" target="_blank" className="mt-3 inline-flex text-xs bg-white/20 hover:bg-white/30 px-3 py-1.5 rounded-md transition-colors">API Docs</a>
        </div>
      </div>
    </aside>
  )
}

export function MobileNav() {
  const pathname = usePathname()
  return (
    <div className="lg:hidden flex items-center gap-1 p-2 border-b bg-white dark:bg-zinc-950 dark:border-zinc-800 overflow-x-auto">
      {nav.map(item => {
        const active = pathname === item.href
        return (
          <Link key={item.href} href={item.href} className={cn("flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium whitespace-nowrap", active ? "bg-zinc-900 text-white" : "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400")}>
            <item.icon className="h-3.5 w-3.5"/>{item.label}
          </Link>
        )
      })}
    </div>
  )
}
