/*
  site-header.tsx
  spboucher.ai Web
  Author: Simon-Pierre Boucher
  Mail: contact@spboucher.ai
*/

"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Menu, X } from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/theme-toggle";

const navItems = [
  { href: "/", label: "Home" },
  { href: "/research", label: "Research" },
  { href: "/teaching", label: "Teaching" },
  { href: "/apps", label: "Apps" },
  { href: "/blog", label: "Blog" },
  { href: "/cv", label: "CV" },
];

export function SiteHeader() {
  const pathname = usePathname();
  const [open, setOpen] = React.useState(false);

  const isActive = (href: string) =>
    pathname === href || (href !== "/" && pathname.startsWith(`${href}/`));

  return (
    <header className="sticky top-0 z-50 w-full border-b border-border/80 bg-background/88 backdrop-blur-xl">
      <div className="mx-auto flex h-16 max-w-5xl items-center justify-between px-4 sm:px-6">
        <Link href="/" className="group flex items-baseline gap-2.5">
          <span
            aria-hidden="true"
            className="self-center border border-foreground bg-foreground px-1.5 py-0.5 font-mono text-[10px] font-semibold tracking-[0.08em] text-background transition-colors duration-300 group-hover:bg-transparent group-hover:text-foreground"
          >
            SB
          </span>
          <span className="font-display text-[1.05rem] font-semibold tracking-tight">
            Simon-Pierre Boucher
          </span>
        </Link>

        <nav className="hidden items-center gap-0.5 md:flex" aria-label="Main">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "relative px-3 py-2 font-mono text-[0.7rem] font-medium uppercase tracking-[0.14em] transition-colors",
                isActive(item.href)
                  ? "text-primary after:absolute after:inset-x-3 after:-bottom-[1.35rem] after:h-[2px] after:bg-primary"
                  : "text-muted-foreground hover:text-foreground"
              )}
            >
              {item.label}
            </Link>
          ))}
          <span aria-hidden="true" className="mx-2 h-4 w-px bg-border" />
          <ThemeToggle />
        </nav>

        <div className="flex items-center gap-1 md:hidden">
          <ThemeToggle />
          <Button
            variant="ghost"
            size="icon"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen(!open)}
          >
            {open ? <X /> : <Menu />}
          </Button>
        </div>
      </div>

      {open && (
        <nav
          className="border-t border-border/80 px-4 pb-4 pt-2 md:hidden"
          aria-label="Mobile"
        >
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              onClick={() => setOpen(false)}
              className={cn(
                "flex items-center justify-between border-b border-border/50 px-1 py-3 font-mono text-xs font-medium uppercase tracking-[0.14em] transition-colors last:border-0",
                isActive(item.href)
                  ? "text-primary"
                  : "text-muted-foreground hover:text-foreground"
              )}
            >
              {item.label}
              {isActive(item.href) && (
                <span aria-hidden="true" className="h-1.5 w-1.5 bg-primary" />
              )}
            </Link>
          ))}
        </nav>
      )}
    </header>
  );
}