import { NavLink, useLocation } from 'react-router-dom'
import { navGroupsForOnboarding } from '../lib/onboarding'
import type { AcAppKey } from '../lib/acAssets'
import { useOnboarding } from '../onboarding/OnboardingContext'
import { AcIcon } from './AcIcon'

function SidebarNavItem({
  to,
  label,
  icon,
  end,
  matchPrefix,
}: {
  to: string
  label: string
  icon: AcAppKey
  end?: boolean
  matchPrefix?: string
}) {
  const { pathname } = useLocation()
  return (
    <NavLink
      to={to}
      end={end}
      className={({ isActive }) => {
        const prefixActive = matchPrefix ? pathname.startsWith(matchPrefix) : false
        const active = isActive || prefixActive
        return `ac-sidebar-nav-item ${active ? 'ac-sidebar-nav-item--active' : ''}`
      }}
    >
      <AcIcon app={icon} size="sm" className="ac-sidebar-nav-icon shrink-0" />
      <span className="min-w-0 truncate">{label}</span>
    </NavLink>
  )
}

export function AppSidebar() {
  const { isComplete } = useOnboarding()
  const groups = navGroupsForOnboarding(isComplete)

  return (
    <aside className="ac-sidebar hidden lg:flex" aria-label="側欄導覽">
      {!isComplete ? (
        <p className="ac-sidebar-onboarding-hint px-4 pb-2 pt-3 text-xs leading-relaxed text-ink-secondary">
          完成入門設定後，會解鎖總覽、任務與更多功能。
        </p>
      ) : null}
      <nav className="ac-sidebar-nav ac-sidebar-nav--top">
        {groups.map((group, index) => (
          <div key={group.label} className="ac-sidebar-nav-group">
            {index > 0 ? <div className="ac-sidebar-nav-divider" aria-hidden /> : null}
            <p className="ac-sidebar-nav-label">{group.label}</p>
            <ul className="space-y-0.5">
              {group.items.map((item) => (
                <li key={item.to}>
                  <SidebarNavItem
                    to={item.to}
                    label={item.label}
                    icon={item.icon}
                    end={item.end}
                    matchPrefix={item.matchPrefix}
                  />
                </li>
              ))}
            </ul>
          </div>
        ))}
      </nav>
    </aside>
  )
}