import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft, ScrollText, BookOpen } from 'lucide-react';
import { NavLink } from 'react-router-dom';
import { useUserRole } from '@/hooks/useUserRole';
import { useSidebar } from '@/hooks/useSidebar';
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@/components/ui/sidebar';

export function AdminSidebar() {
  const { state } = useSidebar();
  const { permissions } = useUserRole();
  const isSuperuser = permissions?.role_level === 'superuser';
  const collapsed = state === 'collapsed';

  const navItems = [
    {
      title: 'Dashboard',
      url: '/admin',
      icon: LayoutDashboard,
    },
    {
      title: 'Moderation',
      url: '/admin/moderation',
      icon: FileText,
    },
    {
      title: 'Reports',
      url: '/admin/reports',
      icon: Flag,
    },
    {
      title: 'System Log',
      url: '/admin/system-log',
      icon: ScrollText,
    },
    {
      title: 'Users',
      url: '/admin/users',
      icon: Users,
    },
    {
      title: 'Blog',
      url: '/admin/blog',
      icon: BookOpen,
    },
    ...(isSuperuser ? [{
      title: 'Settings',
      url: '/admin/settings',
      icon: Settings,
    }] : []),
  ];

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className="border-b border-border/40 px-4 py-4">
        {!collapsed && (
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
              <span className="text-lg">🎢</span>
            </div>
            <div className="flex flex-col">
              <span className="text-sm font-semibold">ThrillWiki</span>
              <span className="text-xs text-muted-foreground">Admin Panel</span>
            </div>
          </div>
        )}
        {collapsed && (
          <div className="flex items-center justify-center">
            <span className="text-lg">🎢</span>
          </div>
        )}
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {navItems.map((item) => (
                <SidebarMenuItem key={item.url}>
                  <SidebarMenuButton asChild tooltip={collapsed ? item.title : undefined}>
                    <NavLink
                      to={item.url}
                      end={item.url === '/admin'}
                      className={({ isActive }) =>
                        isActive
                          ? 'bg-accent text-accent-foreground font-medium'
                          : 'hover:bg-accent/50'
                      }
                    >
                      <item.icon className="w-4 h-4" />
                      {!collapsed && <span>{item.title}</span>}
                    </NavLink>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="border-t border-border/40">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton asChild tooltip={collapsed ? 'Back to ThrillWiki' : undefined}>
              <NavLink to="/" className="hover:bg-accent/50">
                <ArrowLeft className="w-4 h-4" />
                {!collapsed && <span>Back to ThrillWiki</span>}
              </NavLink>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  );
}