'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { mockCurrentUser, getActiveProjects } from '@/lib/mock-data'
import { Rocket, FolderOpen, Bot, Headphones, Receipt, Settings, LogOut, LayoutDashboard } from 'lucide-react'

const navItems = [
  {
    href: '/dashboard',
    label: 'Dashboard',
    icon: LayoutDashboard,
    filled: true,
  },
  {
    href: '/dashboard/projects',
    label: 'My Projects',
    icon: FolderOpen,
    badge: getActiveProjects().length,
  },
  {
    href: '/dashboard/automations',
    label: 'AI Automations',
    icon: Bot,
  },
  {
    href: '/dashboard/support',
    label: 'Support',
    icon: Headphones,
  },
  {
    href: '/billing',
    label: 'Billing',
    icon: Receipt,
  },
  {
    href: '/dashboard/settings',
    label: 'Settings',
    icon: Settings,
  },
]

export function DashboardSidebar() {
  const pathname = usePathname()

  return (
    <aside className="hidden lg:flex flex-col w-72 bg-card border-r border-border h-screen sticky top-0 shrink-0">
      <div className="flex flex-col h-full p-4">
        {/* Logo */}
        <div className="flex items-center gap-3 px-2 py-4 mb-8">
          <div className="bg-gradient-to-br from-primary to-violet-600 p-2.5 rounded-xl text-white flex items-center justify-center shadow-lg shadow-primary/20">
            <Rocket className="w-6 h-6" />
          </div>
          <div className="flex flex-col">
            <h1 className="text-foreground text-lg font-bold leading-none tracking-tight">
              ScaleSite
            </h1>
            <p className="text-muted-foreground text-xs font-medium mt-1">Client Portal</p>
          </div>
        </div>

        {/* Navigation */}
        <nav className="flex flex-col gap-1.5 flex-1">
          {navItems.map((item) => {
            const isActive = pathname === item.href || pathname?.startsWith(item.href + '/')
            const Icon = item.icon

            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all group ${
                  isActive
                    ? 'bg-primary text-white shadow-lg shadow-primary/20'
                    : 'text-muted-foreground hover:bg-white/5 hover:text-foreground'
                }`}
              >
                <Icon className="w-5 h-5" />
                <p className={`text-sm ${isActive ? 'font-semibold' : 'font-medium'}`}>
                  {item.label}
                </p>
                {item.badge && (
                  <Badge
                    variant="secondary"
                    className={`ml-auto text-[10px] font-bold px-2 py-0.5 rounded-full ${
                      isActive
                        ? 'bg-white/20 text-white group-hover:bg-white group-hover:text-primary'
                        : 'bg-primary/20 text-primary'
                    }`}
                  >
                    {item.badge}
                  </Badge>
                )}
              </Link>
            )
          })}
        </nav>

        {/* User profile */}
        <div className="mt-auto border-t border-border pt-4">
          <button className="flex items-center w-full gap-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-colors text-left group">
            <Avatar className="size-10 border border-border group-hover:border-primary transition-colors">
              <AvatarImage src={mockCurrentUser.avatar} alt={mockCurrentUser.name} />
              <AvatarFallback>{mockCurrentUser.name.charAt(0)}</AvatarFallback>
            </Avatar>
            <div className="flex flex-col min-w-0">
              <p className="text-foreground text-sm font-semibold truncate">
                {mockCurrentUser.name}
              </p>
              <p className="text-muted-foreground text-xs truncate group-hover:text-foreground">
                {mockCurrentUser.email}
              </p>
            </div>
            <LogOut className="w-5 h-5 text-muted-foreground ml-auto group-hover:text-foreground transition-colors" />
          </button>
        </div>
      </div>
    </aside>
  )
}