"use client";

import { useState } from "react";
import { Logo } from "@/components/Logo";
import { MobileMenuButton, MobileSidebar, sidebarLinkClass } from "@/components/MobileSidebar";
import { DOCS_URL } from "@/lib/plans";

const NAV_LINKS = [
  { href: "#benefits", label: "Benefits" },
  { href: "#download", label: "Download" },
  { href: "#pricing", label: "Pricing" },
  { href: "#support", label: "Support" },
] as const;

const DOCS_HREF = `${DOCS_URL.replace(/\/$/, "")}/docs/intro`;

function NavAnchor({
  href,
  label,
  onNavigate,
  className = "text-base font-medium text-gray-300 transition-colors duration-200 hover:text-white",
}: {
  href: string;
  label: string;
  onNavigate?: () => void;
  className?: string;
}) {
  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    const id = href.replace("#", "");
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
    window.history.pushState(null, "", href);
    onNavigate?.();
  };

  return (
    <a href={href} onClick={handleClick} className={className}>
      {label}
    </a>
  );
}

function DocsLink({
  onNavigate,
  className = "text-base font-medium text-gray-300 transition-colors duration-200 hover:text-white",
}: {
  onNavigate?: () => void;
  className?: string;
}) {
  return (
    <a
      href={DOCS_HREF}
      target="_blank"
      rel="noopener noreferrer"
      className={className}
      onClick={() => onNavigate?.()}
    >
      Docs
    </a>
  );
}

export function LandingNavbar() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <>
      <header className="group absolute left-0 right-0 top-0 z-20 bg-transparent transition-all duration-300 hover:bg-black/70 hover:backdrop-blur-md">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
          <Logo size="md" beta />

          <div className="flex items-center gap-4">
            <nav className="hidden items-center gap-10 sm:flex">
              {NAV_LINKS.map(({ href, label }) => (
                <NavAnchor key={href} href={href} label={label} />
              ))}
              <DocsLink />
            </nav>

            <MobileMenuButton
              open={menuOpen}
              onClick={() => setMenuOpen((prev) => !prev)}
            />
          </div>
        </div>
      </header>

      <MobileSidebar open={menuOpen} onClose={() => setMenuOpen(false)} title="Menu">
        {NAV_LINKS.map(({ href, label }) => (
          <NavAnchor
            key={href}
            href={href}
            label={label}
            onNavigate={() => setMenuOpen(false)}
            className={sidebarLinkClass()}
          />
        ))}
        <DocsLink
          onNavigate={() => setMenuOpen(false)}
          className={sidebarLinkClass()}
        />
      </MobileSidebar>
    </>
  );
}