'use client'

import { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'
import {
  BarChart3,
  Users,
  Settings,
  FileText,
  LayoutDashboard,
  MessageSquare,
  CreditCard,
  LogOut,
  Menu,
  X,
  ChevronDown,
} from 'lucide-react'
import { Button } from '@/components/ui/button'

const menuItems = [
  {
    title: 'Dashboard',
    icon: LayoutDashboard,
    href: '/admin',
    badge: null,
  },
  {
    title: 'Analytics',
    icon: BarChart3,
    href: '/admin/analytics',
    badge: null,
  },
  {
    title: 'Users',
    icon: Users,
    href: '/admin/users',
    badge: '12',
  },
  {
    title: 'Messages',
    icon: MessageSquare,
    href: '/admin/messages',
    badge: '5',
  },
  {
    title: 'Reports',
    icon: FileText,
    href: '/admin/reports',
    badge: null,
  },
  {
    title: 'Billing',
    icon: CreditCard,
    href: '/admin/billing',
    badge: null,
  },
  {
    title: 'Settings',
    icon: Settings,
    href: '/admin/settings',
    badge: null,
  },
]

export function AdminSidebar() {
  const pathname = usePathname()
  const [isOpen, setIsOpen] = useState(false)

  const isActive = (href: string) => {
    return pathname === href || pathname.startsWith(href + '/')
  }

  return (
    <>
      {/* Mobile Menu Button */}
      <div className="fixed top-0 left-0 right-0 h-16 bg-sidebar border-b border-sidebar-border flex items-center px-4 md:hidden z-50">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setIsOpen(!isOpen)}
          className="text-sidebar-foreground"
        >
          {isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
        </Button>
        <h1 className="ml-4 font-bold text-sidebar-foreground">Admin</h1>
      </div>

      {/* Sidebar Overlay (Mobile) */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black/50 md:hidden z-40"
          onClick={() => setIsOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside
        className={cn(
          'fixed left-0 top-0 bottom-0 w-64 bg-sidebar border-r border-sidebar-border transition-transform duration-300 z-40',
          'pt-20 md:pt-6 md:translate-x-0',
          isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
        )}
      >
        <div className="px-4 py-6 space-y-1">
          {/* Logo */}
          <div className="px-4 pb-4 mb-6 hidden md:block">
            <div className="font-bold text-lg text-sidebar-foreground">
              Admin Panel
            </div>
            <p className="text-xs text-sidebar-foreground/60">Dashboard</p>
          </div>

          {/* Navigation Menu */}
          <nav className="space-y-1">
            {menuItems.map((item) => {
              const Icon = item.icon
              const active = isActive(item.href)

              return (
                <Link key={item.href} href={item.href}>
                  <button
                    onClick={() => setIsOpen(false)}
                    className={cn(
                      'w-full flex items-center justify-between px-4 py-3 rounded-lg transition-colors',
                      active
                        ? 'bg-sidebar-primary text-sidebar-primary-foreground'
                        : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
                    )}
                  >
                    <div className="flex items-center gap-3">
                      <Icon className="w-5 h-5" />
                      <span className="text-sm font-medium">{item.title}</span>
                    </div>
                    {item.badge && (
                      <span
                        className={cn(
                          'inline-flex items-center justify-center px-2 py-1 rounded-full text-xs font-semibold',
                          active
                            ? 'bg-sidebar-primary-foreground/20 text-sidebar-primary-foreground'
                            : 'bg-sidebar-accent text-sidebar-accent-foreground'
                        )}
                      >
                        {item.badge}
                      </span>
                    )}
                  </button>
                </Link>
              )
            })}
          </nav>

          {/* Divider */}
          <div className="my-6 border-t border-sidebar-border" />

          {/* Bottom Section */}
          <div className="space-y-2">
            <button className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors text-sm font-medium">
              <LogOut className="w-5 h-5" />
              <span>Logout</span>
            </button>
          </div>
        </div>
      </aside>

      {/* Sidebar Spacer for Main Content */}
      <div className="hidden md:block w-64" />
    </>
  )
}