"use client";

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

const navLinks = [
  { href: "/", label: "Home" },
  { href: "/genre", label: "Genres" },
];

export function Header() {
  const pathname = usePathname();

  // Hide header on chapter reader for immersive reading
  if (pathname.match(/^\/manga\/[^/]+\/\d+$/)) {
    return null;
  }

  return (
    <header className="sticky top-0 z-40 bg-background text-foreground backdrop-blur-xl shadow-sm pt-safe">
      {/* Top row: logo + search */}
      <div className="max-w-6xl mx-auto px-4 h-14 flex items-center gap-3">
        <Link href="/" className="flex items-center gap-2.5 shrink-0">
          <img
            src="/logo.svg"
            alt="SunnyMH"
            className="w-8 h-8 rounded-lg"
          />
          <span className="text-lg font-extrabold tracking-tight">
            SunnyMH
          </span>
        </Link>

        {/* Desktop nav links */}
        <nav className="hidden sm:flex items-center gap-1 ml-4">
          {navLinks.map((link) => {
            const isActive =
              link.href === "/"
                ? pathname === "/"
                : pathname.startsWith(link.href);
            return (
              <Link
                key={link.href}
                href={link.href}
                className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${
                  isActive
                    ? "text-accent bg-accent/10"
                    : "text-muted hover:text-foreground hover:bg-surface"
                }`}
              >
                {link.label}
              </Link>
            );
          })}
        </nav>

        <div className="flex-1" />
        <SearchBar />
      </div>
    </header>
  );
}