"use client";

import Link from "next/link";
import { ThemeToggle } from "@/components/theme-toggle";
import { Search } from "lucide-react";
import { HiddenEasterEggTrigger } from "@/components/hidden-easter-egg-trigger";
import { useAuth } from "@/components/auth-provider";

export function Navbar() {
  const { session, loginAs, logout } = useAuth();
  return (
    <header className="sticky top-0 z-40 border-b border-white/10 bg-slate-950/70 backdrop-blur-2xl">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 md:h-18 md:px-6">
        <div className="flex min-w-0 items-center gap-4 md:gap-8">
          <HiddenEasterEggTrigger>
            <Link href="/" className="flex items-center gap-2.5">
              <span className="grid h-8 w-8 place-items-center rounded-xl border border-cyan-300/40 bg-cyan-400/10 text-sm">D</span>
              <span className="text-sm font-semibold tracking-wide md:text-base">Download Nova</span>
            </Link>
          </HiddenEasterEggTrigger>
          <nav className="hidden items-center gap-5 text-sm text-slate-300 lg:flex">
            <Link href="/apps" className="transition hover:text-cyan-200">资源库</Link>
            <Link href="/insights" className="transition hover:text-cyan-200">数据洞察</Link>
            <Link href="/unlock" className="transition hover:text-cyan-200">解锁中心</Link>
            <Link href="/pricing" className="transition hover:text-cyan-200">会员套餐</Link>
          </nav>
        </div>
        <div className="flex shrink-0 items-center gap-2.5">
          <button className="pill hidden md:inline-flex" onClick={session.isLoggedIn ? logout : () => loginAs()}>
            {session.isLoggedIn ? `${session.userName ?? "用户"} · ${session.accessLevel}` : "未登录"}
          </button>
          <Link href="/apps" className="rounded-full border border-white/20 p-2 transition hover:border-cyan-300/40 hover:bg-cyan-400/10">
            <Search size={16} />
          </Link>
          <ThemeToggle />
          <Link href="/pricing" className="cta-main rounded-full px-4 py-1.5 text-xs shadow-none md:text-sm">
            登录 / 会员
          </Link>
        </div>
      </div>
    </header>
  );
}