"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { BookOpen, Code, FileText, Hash, Settings, Tag, Info, Users, Navigation, ChevronRight, Home } from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"

const navigationItems = [
  { name: "Kitchen Sink", href: "/", icon: Home },
  { name: "Basic Tags", href: "/basic-tags", icon: Tag },
  { name: "Parameters", href: "/parameters", icon: Code },
  { name: "Types", href: "/type-definitions", icon: Hash },
  { name: "Functions", href: "/functions", icon: Settings },
  { name: "Modules", href: "/modules", icon: FileText },
  { name: "Advanced", href: "/advanced", icon: BookOpen },
  { name: "Objects", href: "/objects", icon: Hash },
  { name: "Docs", href: "/documentation", icon: Info },
  { name: "Examples", href: "/examples", icon: Info },
  { name: "Best Practices", href: "/best-practices", icon: Users },
]

export default function Sidebar() {
  const pathname = usePathname()

  return (
    <aside className="w-64 bg-gradient-to-b from-card/95 to-card/90 backdrop-blur-sm border-r border-border/50 fixed left-0 top-16 h-[calc(100vh-4rem)] z-40 overflow-y-auto hidden lg:block shadow-2xl">
      <div className="p-6">
        <Card className="bg-card/80 border-border/30 shadow-lg backdrop-blur-sm">
          <CardHeader className="pb-4 border-b border-border/20">
            <CardTitle className="text-base text-foreground flex items-center gap-3 font-semibold">
              <div className="p-2 rounded-lg bg-primary/10">
                <Navigation className="h-4 w-4 text-primary" />
              </div>
              <div>
                <div>Navigation</div>
                <div className="text-xs text-muted-foreground font-normal mt-1">
                  {navigationItems.length} {navigationItems.length === 1 ? 'section' : 'sections'}
                </div>
              </div>
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <nav className="space-y-1 p-4">
              {navigationItems.map((item, index) => {
                const Icon = item.icon
                const isActive = pathname === item.href
                
                return (
                  <div key={item.href} className="group">
                    <Link href={item.href}>
                      <Button
                        variant="ghost"
                        size="sm"
                        className={`w-full justify-start gap-3 text-sm transition-all duration-300 group-hover:translate-x-1 ${
                          isActive
                            ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md"
                            : "hover:bg-primary/5 text-muted-foreground hover:text-foreground"
                        } h-10 px-3`}
                      >
                        <div className="flex items-center gap-2 flex-1 min-w-0">
                          {isActive ? (
                            <div className="w-2 h-2 rounded-full bg-primary-foreground flex-shrink-0" />
                          ) : (
                            <Icon className="h-3 w-3 flex-shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
                          )}
                          <span className="truncate font-medium">{item.name}</span>
                        </div>
                        {isActive && (
                          <ChevronRight className="h-3 w-3 flex-shrink-0 animate-pulse" />
                        )}
                      </Button>
                    </Link>
                    {index < navigationItems.length - 1 && (
                      <div className="h-px bg-border/30 mx-3 my-1" />
                    )}
                  </div>
                )
              })}
            </nav>
          </CardContent>
        </Card>
      </div>
    </aside>
  )
}