"use client";

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

export default function Nav() {
  const pathname = usePathname() ?? "/";
  const isUsers = pathname.startsWith("/users");
  const isAccounts = !isUsers;

  return (
    <header
      className="sticky top-0 z-10 border-b border-zinc-200/80 bg-white/80 backdrop-blur-md"
      style={{
        // Push content below the iPhone notch when the PWA is installed.
        // No-op on browsers without a notch (env() resolves to 0).
        paddingTop: "env(safe-area-inset-top)",
        paddingLeft: "env(safe-area-inset-left)",
        paddingRight: "env(safe-area-inset-right)",
      }}
    >
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6">
        <Link href="/" className="group flex items-center gap-3">
          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900 text-[11px] font-semibold tracking-tight text-white">
            CM
          </span>
          <span className="hidden flex-col leading-none sm:flex">
            <span className="text-sm font-semibold tracking-tight text-zinc-900">
              CM Bot V2
            </span>
            <span className="mt-0.5 text-[11px] text-zinc-500">
              Account dashboard
            </span>
          </span>
        </Link>

        <nav
          aria-label="Primary"
          className="flex items-center gap-1 rounded-full bg-zinc-100 p-1"
        >
          <NavLink href="/" active={isAccounts}>
            Accounts
          </NavLink>
          <NavLink href="/users" active={isUsers}>
            Users
          </NavLink>
        </nav>
      </div>
    </header>
  );
}

function NavLink({
  href,
  active,
  children,
}: {
  href: string;
  active: boolean;
  children: React.ReactNode;
}) {
  return (
    <Link
      href={href}
      aria-current={active ? "page" : undefined}
      className={`inline-flex items-center rounded-full px-4 py-1.5 text-xs font-medium transition-colors sm:text-sm ${
        active
          ? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200/60"
          : "text-zinc-500 hover:text-zinc-900"
      }`}
    >
      {children}
    </Link>
  );
}