'use client'

import { usePathname, useRouter } from 'next/navigation'
import { CONFIG_GROUPS } from '../admin/configNavigation'

export default function AdminSidebar() {
  const pathname = usePathname()
  const router = useRouter()
  const links = CONFIG_GROUPS.flatMap((group) => group.items)
  const current = links.find((item) => item.href === pathname)
  const renderLinks = (items: typeof links) => (
    <div className="admin-nav-links">
      {items.map((item) => <a key={item.href} href={item.href} aria-current={pathname === item.href ? 'page' : undefined} className={pathname === item.href ? 'is-active' : ''}>{item.label}</a>)}
    </div>
  )
  return (
    <nav className="admin-sidebar" aria-label="Settings navigation">
      <label className="config-mobile-picker">
        <span>Settings</span>
        <select aria-label="Settings section" value={current?.href ?? '/admin'} onChange={(event) => router.push(event.target.value)}>
          <option value="/admin">Settings overview</option>
          {CONFIG_GROUPS.map((group) => <optgroup label={group.title} key={group.title}>{group.items.map((item) => <option key={item.href} value={item.href}>{item.label}</option>)}</optgroup>)}
        </select>
      </label>
      <div className="config-desktop-navigation">
        <a href="/admin" className="config-sidebar-home" aria-current={pathname === '/admin' ? 'page' : undefined}>Settings <span aria-hidden="true">↗</span></a>
        {CONFIG_GROUPS.map((group) => group.advanced ? (
          <details className="admin-nav-group config-nav-advanced" key={pathname + group.title} open={group.items.some((item) => item.href === pathname) || undefined}>
            <summary>{group.title}</summary>{renderLinks(group.items)}
          </details>
        ) : (
          <div className="admin-nav-group" key={group.title}><span className="admin-nav-title">{group.title}</span>{renderLinks(group.items)}</div>
        ))}
        <a href="/" className="config-sidebar-back">← My requests</a>
      </div>
    </nav>
  )
}