"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { clsx } from "clsx";

import type { DocsNavGroup } from "@/lib/docs/navigation";

export function DocsNav({
  lang,
  groups,
  className,
  onNavigate,
}: {
  lang: string;
  groups: DocsNavGroup[];
  className?: string;
  onNavigate?: () => void;
}) {
  const pathname = usePathname();
  // Strip the /<lang> prefix, then any query/hash and trailing slash, to
  // compare robustly against locale-less nav hrefs.
  const stripTrailingSlash = (p: string) => p.replace(/\/+$/, "") || "/";
  const current =
    stripTrailingSlash(
      pathname.replace(new RegExp(`^/${lang}`), "").replace(/[?#].*$/, ""),
    ) || "/docs";

  return (
    <nav className={className}>
      <ul className="space-y-8">
        {groups.map((group) => (
          <li key={group.title}>
            <h3 className="text-xs font-semibold tracking-wide text-zinc-900 uppercase dark:text-white">
              {group.title}
            </h3>
            <ul className="mt-3 space-y-1 border-l border-zinc-900/10 dark:border-white/10">
              {group.links.map((link) => {
                const active = current === stripTrailingSlash(link.href);
                return (
                  <li key={link.href}>
                    <Link
                      href={`/${lang}${link.href}`}
                      onClick={onNavigate}
                      aria-current={active ? "page" : undefined}
                      className={clsx(
                        "-ml-px block border-l py-1 pl-4 text-sm transition",
                        active
                          ? "border-brand-orange text-brand-orange font-medium"
                          : "border-transparent text-zinc-600 hover:border-zinc-400 hover:text-zinc-900 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-white",
                      )}
                    >
                      {link.title}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </li>
        ))}
      </ul>
    </nav>
  );
}