'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'
import type { ManualEntry } from '@/lib/manual.generated'

type Props = {
  toc: readonly ManualEntry[]
}

function entryHref(entry: ManualEntry): string {
  if (entry.slug.length === 0) return '/manual'
  return '/manual/' + entry.slug.join('/')
}

export function ManualSidebar({ toc }: Props) {
  const pathname = usePathname()

  return (
    <nav
      aria-label="Manual chapters"
      className="sticky top-20 hidden h-[calc(100vh-6rem)] w-64 shrink-0 overflow-y-auto border-r border-border px-4 py-6 lg:block"
    >
      <p className="mb-2 px-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
        Manual
      </p>
      <ul className="space-y-1">
        {toc.map((entry) => {
          const href = entryHref(entry)
          const isActive = pathname === href
          return (
            <li key={href}>
              <Link
                href={href}
                className={cn(
                  'block rounded-md px-3 py-2 text-sm transition-colors',
                  isActive
                    ? 'bg-primary/10 font-medium text-primary'
                    : 'text-foreground hover:bg-muted hover:text-foreground'
                )}
              >
                {entry.title}
              </Link>
            </li>
          )
        })}
      </ul>
    </nav>
  )
}