'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
  LayoutDashboard,
  Users,
  FileText,
  Calendar,
  Newspaper,
  Menu as MenuIcon,
  Settings,
  Building2,
  UserCog,
  BarChart3,
  Image as ImageIcon,
  Activity,
  Bell,
  ChevronDown,
  ChevronRight,
  List,
  FileCheck,
  Briefcase,
  MapPin,
} from 'lucide-react'

interface NavItem {
  name: string
  href: string
  icon: React.ComponentType<{ className?: string }>
  roles?: string[] // Optional: restrict to specific roles
  permissions?: string[] // Optional: specific permissions required
  children?: NavItem[] // For nested items
}

interface NavSection {
  title: string
  items: NavItem[]
  roles?: string[] // Show section only to these roles
}

const navigationSections: NavSection[] = [
  {
    title: 'Overview',
    items: [
      { 
        name: 'Dashboard', 
        href: '/admin/dashboard', 
        icon: LayoutDashboard,
        // Everyone with admin access can see dashboard
      },
    ],
  },
  {
    title: 'Content Management',
    items: [
      { 
        name: 'News Articles', 
        href: '/admin/news-articles', 
        icon: Newspaper,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER', 'CONTENT_WRITER', 'SOCIAL_MEDIA_SPECIALIST'],
      },
      { 
        name: 'Events', 
        href: '/admin/events', 
        icon: Calendar,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER', 'CONTENT_WRITER', 'EVENTS_COORDINATOR'],
      },
      { 
        name: 'Pages', 
        href: '/admin/pages', 
        icon: FileText,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER', 'CONTENT_WRITER'],
      },
      { 
        name: 'News Ticker', 
        href: '/admin/news-ticker', 
        icon: MenuIcon,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER'],
      },
      { 
        name: 'Menu', 
        href: '/admin/menu', 
        icon: List,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER'],
      },
      { 
        name: 'Tenders', 
        href: '/admin/tenders', 
        icon: FileCheck,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER', 'COMMUNICATIONS_OFFICER'],
      },
      { 
        name: 'Vacancies', 
        href: '/admin/vacancies', 
        icon: Briefcase,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER', 'COMMUNICATIONS_OFFICER'],
      },
      { 
        name: 'Proof of Residence', 
        href: '/admin/proof-of-address', 
        icon: MapPin,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER'],
      },
      { 
        name: 'Media Library', 
        href: '/admin/media', 
        icon: ImageIcon,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER', 'CONTENT_WRITER', 'GRAPHIC_DESIGNER', 'SOCIAL_MEDIA_SPECIALIST'],
      },
    ],
    roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER', 'CONTENT_WRITER', 'SOCIAL_MEDIA_SPECIALIST', 'GRAPHIC_DESIGNER', 'EVENTS_COORDINATOR'],
  },
  {
    title: 'User Management',
    items: [
      { 
        name: 'Users', 
        href: '/admin/users', 
        icon: Users,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER'],
      },
      { 
        name: 'Roles & Permissions', 
        href: '/admin/roles', 
        icon: UserCog,
        roles: ['ADMINISTRATOR'],
      },
      { 
        name: 'Departments', 
        href: '/admin/departments', 
        icon: Building2,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER'],
      },
    ],
    roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER'],
  },
  {
    title: 'Analytics & Monitoring',
    items: [
      { 
        name: 'Analytics', 
        href: '/admin/analytics', 
        icon: BarChart3,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER'],
      },
      { 
        name: 'Audit Logs', 
        href: '/admin/audit-logs', 
        icon: Activity,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER'],
      },
    ],
    roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER'],
  },
  {
    title: 'System Administration',
    items: [
      { 
        name: 'Settings', 
        href: '/admin/settings', 
        icon: Settings,
        roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER'],
      },
    ],
    roles: ['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER'],
  },
]

export default function AdminSidebar() {
  const pathname = usePathname()
  const [userRole, setUserRole] = useState<string>('')
  const [userPermissions, setUserPermissions] = useState<string[]>([])
  const [collapsedSections, setCollapsedSections] = useState<Set<string>>(new Set())

  useEffect(() => {
    // Import auth utilities dynamically to avoid SSR issues
    import('@/lib/auth').then(({ getAdminUser }) => {
      const userData = getAdminUser()
      if (userData) {
        setUserRole(userData.role || '')
        setUserPermissions(userData.permissions || [])
      }
    })
  }, [])

  const canAccessItem = (item: NavItem): boolean => {
    // If no roles specified, everyone can access
    if (!item.roles || item.roles.length === 0) {
      return true
    }

    // Check if user's role is in the allowed roles
    const hasRole = item.roles.includes(userRole)

    // If specific permissions are required, check those too
    if (item.permissions && item.permissions.length > 0) {
      const hasPermission = item.permissions.some(perm => 
        userPermissions.includes(perm)
      )
      return hasRole || hasPermission
    }

    return hasRole
  }

  const canAccessSection = (section: NavSection): boolean => {
    // If no roles specified for section, show it
    if (!section.roles || section.roles.length === 0) {
      return true
    }

    // Check if user's role is in the allowed roles
    return section.roles.includes(userRole)
  }

  const toggleSection = (title: string) => {
    const newCollapsed = new Set(collapsedSections)
    if (newCollapsed.has(title)) {
      newCollapsed.delete(title)
    } else {
      newCollapsed.add(title)
    }
    setCollapsedSections(newCollapsed)
  }

  return (
    <aside className="fixed left-0 top-16 h-[calc(100vh-4rem)] w-64 glass-dark overflow-y-auto z-30">
      <nav className="p-4 space-y-6">
        {navigationSections.map((section) => {
          // Check if user can access this section
          if (!canAccessSection(section)) return null

          // Filter items user can access
          const accessibleItems = section.items.filter(canAccessItem)
          
          // Don't show empty sections
          if (accessibleItems.length === 0) return null

          const isCollapsed = collapsedSections.has(section.title)

          return (
            <div key={section.title}>
              {/* Section Header */}
              <button
                onClick={() => toggleSection(section.title)}
                className="flex items-center justify-between w-full px-2 py-1 mb-2 text-white/50 text-xs font-semibold uppercase tracking-wider hover:text-white/70 transition-colors rounded-full hover:bg-secondary/40"
              >
                <span>{section.title}</span>
                {isCollapsed ? (
                  <ChevronRight className="w-4 h-4" />
                ) : (
                  <ChevronDown className="w-4 h-4" />
                )}
              </button>

              {/* Section Items */}
              {!isCollapsed && (
                <div className="space-y-1">
                  {accessibleItems.map((item) => {
                    const Icon = item.icon
                    const isActive = pathname === item.href || pathname?.startsWith(item.href + '/')

                    return (
                      <Link
                        key={item.name}
                        href={item.href}
                        className={`flex items-center gap-3 px-4 py-2.5 rounded-full transition-all ${
                          isActive
                            ? 'bg-primary text-white shadow-lg shadow-primary/30'
                            : 'text-white/70 hover:bg-secondary/40 hover:text-white'
                        }`}
                      >
                        <Icon className="w-5 h-5" />
                        <span className="font-medium text-sm">{item.name}</span>
                      </Link>
                    )
                  })}
                </div>
              )}
            </div>
          )
        })}
      </nav>
    </aside>
  )
}