'use client'

import { usePathname } from 'next/navigation'

const NAV_GROUPS = [
  {
    title: 'Services',
    items: [
      { href: '/admin/jellyseerr', label: 'Jellyseerr' },
      { href: '/admin/jellyfin', label: 'Jellyfin' },
      { href: '/admin/sonarr', label: 'Sonarr' },
      { href: '/admin/radarr', label: 'Radarr' },
      { href: '/admin/prowlarr', label: 'Prowlarr' },
      { href: '/admin/qbittorrent', label: 'qBittorrent' },
    ],
  },
  {
    title: 'Requests',
    items: [
      { href: '/admin/requests', label: 'Request syncing' },
      { href: '/admin/artwork', label: 'Artwork' },
      { href: '/admin/cache', label: 'Cache' },
    ],
  },
  {
    title: 'Admin',
    items: [
      { href: '/users', label: 'Users' },
      { href: '/admin/logs', label: 'Activity log' },
      { href: '/admin/maintenance', label: 'Maintenance' },
    ],
  },
]

export default function AdminSidebar() {
  const pathname = usePathname()
  return (
    <nav className="admin-sidebar">
      <div className="admin-sidebar-title">Settings</div>
      {NAV_GROUPS.map((group) => (
        <div key={group.title} className="admin-nav-group">
          <span className="admin-nav-title">{group.title}</span>
          <div className="admin-nav-links">
            {group.items.map((item) => {
              const isActive =
                pathname === item.href ||
                (item.href !== '/' && pathname.startsWith(item.href))
              return (
                <a key={item.href} href={item.href} className={isActive ? 'is-active' : ''}>
                  {item.label}
                </a>
              )
            })}
          </div>
        </div>
      ))}
    </nav>
  )
}