import { 
  Home, 
  Music, 
  Users, 
  Settings, 
  Download,
  PlayCircle
} from 'lucide-react'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarRail,
} from '@/components/ui/sidebar'
import { NavGroup } from './nav/NavGroup'
import { NavItem } from './nav/NavItem'
import { UserNav } from './nav/UserNav'
import { useAuth } from '@/contexts/AuthContext'

export function AppSidebar() {
  const { user, logout } = useAuth()

  if (!user) return null

  return (
    <Sidebar variant="sidebar" collapsible="icon">
      <SidebarHeader>
        <div className="flex items-center gap-2 px-2 py-2">
          <Music className="h-6 w-6" />
          <span className="font-semibold text-lg group-data-[collapsible=icon]:hidden">Soundboard</span>
        </div>
      </SidebarHeader>

      <SidebarContent>
        <NavGroup label="Application">
          <NavItem href="/" icon={Home} title="Dashboard" />
          <NavItem href="/sounds" icon={Music} title="Sounds" />
          <NavItem href="/playlists" icon={PlayCircle} title="Playlists" />
          <NavItem href="/extractions" icon={Download} title="Extractions" />
        </NavGroup>

        {user.role === "admin" && (
          <NavGroup label="Admin">
            <NavItem href="/admin/users" icon={Users} title="Users" />
            <NavItem href="/admin/settings" icon={Settings} title="Settings" />
          </NavGroup>
        )}
      </SidebarContent>

      <SidebarFooter>
        <UserNav user={user} logout={logout} />
      </SidebarFooter>

      <SidebarRail />
    </Sidebar>
  )
}