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

interface AppSidebarProps {
  showCompactPlayer?: boolean
}

export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
  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">
            SDB v2
          </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>
        {showCompactPlayer && (
          <>
            <Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
            <div className="p-2">
              <CompactPlayer />
            </div>
            <Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
          </>
        )}
        <CreditsNav user={user} />
        <Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
        <UserNav user={user} logout={logout} />
      </SidebarFooter>

      <SidebarRail />
    </Sidebar>
  )
}