"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import Logo from "./Logo";
import ThemeToggle from "./ThemeToggle";

const LINKS = [
  { href: "/", label: "Assessments" },
  { href: "/knowledge-base", label: "Knowledge base" },
  { href: "/portfolio", label: "Portfolio" },
  { href: "/catalog", label: "Product catalog" },
  { href: "/settings", label: "Settings" },
];

export default function Nav() {
  const path = usePathname();
  const isReport = path.endsWith("/report");

  // Questionnaire respondents get a standalone page with no route into the tool.
  if (path.startsWith("/q/")) return null;

  return (
    <header
      className={`no-print sticky top-0 z-40 mb-6 border-b bg-[var(--plane)]/85 backdrop-blur-xl ${isReport ? "print:hidden" : ""}`}
    >
      <div className="mx-auto flex h-14 w-full max-w-[1600px] items-center gap-2 px-4 sm:px-6">
        <Link href="/" className="mr-3 flex items-center gap-2.5">
          <Logo size={24} />
          <span className="text-[14px] font-semibold tracking-tight">Converge</span>
        </Link>

        <nav className="flex items-center gap-1">
          {LINKS.map((l) => {
            const active = l.href === "/" ? path === "/" || path.startsWith("/assessments") : path.startsWith(l.href);
            return (
              <Link
                key={l.href}
                href={l.href}
                className={`rounded-lg px-3 py-1.5 text-[13px] font-medium transition-colors ${
                  active
                    ? "bg-[var(--surface-2)] text-[var(--text-primary)]"
                    : "text-[var(--text-secondary)] hover:bg-[var(--surface-2)] hover:text-[var(--text-primary)]"
                }`}
              >
                {l.label}
              </Link>
            );
          })}
        </nav>

        <div className="ml-auto">
          <ThemeToggle />
        </div>
      </div>
    </header>
  );
}