import { useState } from 'react'
import { NavLink, Outlet, useLocation } from 'react-router-dom'
import {
  HiChevronRight,
  HiAcademicCap,
  HiBookOpen,
  HiDocumentText,
  HiQuestionMarkCircle,
  HiUserGroup,
  HiCog6Tooth,
  HiOutlineUserCircle,
} from 'react-icons/hi2'
import { toast } from 'sonner'
import { navigationItems } from '../config/navigation.js'
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '../components/ui/dropdown-menu.jsx'

const iconMap = {
  '/courses': HiBookOpen,
  '/lessons': HiDocumentText,
  '/question-bank': HiQuestionMarkCircle,
  '/users': HiUserGroup,
  '/settings': HiCog6Tooth,
}

function SidebarItem({ item }) {
  const [open, setOpen] = useState(false)
  const hasChildren = item.children && item.children.length > 0
  const location = useLocation()
  const isChildActive = hasChildren && item.children.some((c) => location.pathname === c.path)
  const Icon = iconMap[item.path]

  if (!hasChildren) {
    return (
      <NavLink
        to={item.path}
        className={({ isActive }) =>
          isActive ? 'sidebar__link sidebar__link--active' : 'sidebar__link'
        }
        title={item.label}
      >
        <span className="sidebar__link-icon">
          {Icon ? <Icon size={18} /> : item.shortLabel}
        </span>
        <span className="sidebar__link-text">{item.label}</span>
      </NavLink>
    )
  }

  return (
    <div className={'sidebar__group' + (open || isChildActive ? ' sidebar__group--open' : '')}>
      <button
        type="button"
        className={'sidebar__link sidebar__link--parent'}
        onClick={() => setOpen((v) => !v)}
        title={item.label}
      >
        <span className="sidebar__link-icon">
          {Icon ? <Icon size={18} /> : item.shortLabel}
        </span>
        <span className="sidebar__link-text">{item.label}</span>
        <HiChevronRight className={'sidebar__chevron' + (open ? ' sidebar__chevron--open' : '')} />
      </button>
      {open && (
        <div className="sidebar__submenu">
          {item.children.map((child) => (
            <NavLink
              key={child.path}
              to={child.path}
              className={({ isActive }) =>
                isActive ? 'sidebar__sublink sidebar__sublink--active' : 'sidebar__sublink'
              }
            >
              <span className="sidebar__sublink-text">{child.label}</span>
            </NavLink>
          ))}
        </div>
      )}
    </div>
  )
}

function MainLayout() {
  return (
    <div className="app-shell">
      <aside className="sidebar">
        <div className="sidebar__brand">
          <span className="sidebar__logo"><HiAcademicCap size={22} /></span>
          <div className="sidebar__brand-text">
            <strong>APLP LMS</strong>
            <span>Learning platform</span>
          </div>
        </div>

        <div className="sidebar__divider" />

        <nav className="sidebar__nav" aria-label="Main navigation">
          {navigationItems.map((item) => (
            <SidebarItem key={item.path} item={item} />
          ))}
        </nav>

        <div className="sidebar__footer">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button
                type="button"
                className="sidebar__footer-btn"
                aria-label="Account menu"
                title="Account"
              >
                <HiOutlineUserCircle size={20} />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent side="right" align="end">
              <DropdownMenuItem onSelect={() => toast('Profile — coming soon')}>
                Profile
              </DropdownMenuItem>
              <DropdownMenuItem onSelect={() => toast('Logout — coming soon')}>
                Logout
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </aside>

      <main className="main-content">
        <Outlet />
      </main>
    </div>
  )
}

export default MainLayout