import { hasPaidRegistration, isAdmin, isOnTrial } from "@/lib/access";
import { getCurrentUser } from "@/lib/auth";
import { Logo } from "./Logo";
import { LogoutButton } from "./LogoutButton";
import { MobileNav } from "./MobileNav";

export async function SiteHeader() {
  const user = await getCurrentUser();
  const admin = isAdmin(user);
  const paid = hasPaidRegistration(user);
  const trial = isOnTrial(user);
  return (
    <header className="sticky top-0 z-40 border-b border-forest/10 bg-paper/90 backdrop-blur">
      <div className="kente-line" />
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
        <Logo />
        <nav className="hidden items-center gap-6 text-sm text-forest md:flex">
          <a href="/#blueprints" className="hover:text-terra">
            Blueprints
          </a>
          <a href="/courses" className="hover:text-terra">
            Courses
          </a>
          <a href="/blog" className="hover:text-terra">
            Blog
          </a>
          <a href="/#tutor" className="hover:text-terra">
            Tutor
          </a>
          <a href="/agent" className="hover:text-terra">
            Live coach
          </a>
          {admin ? (
            <a href="/admin" className="hover:text-terra">
              Admin
            </a>
          ) : null}
        </nav>
        <div className="hidden items-center gap-3 md:flex">
          {user ? (
            <>
              <a href={paid ? "/dashboard" : "/pay"} className="text-sm font-medium text-forest hover:text-terra">
                {user.name.split(" ")[0]}
              </a>
              <LogoutButton className="text-sm text-forest/70 hover:text-forest" />
              {paid ? (
                <a href="/dashboard" className="rounded-full bg-forest px-4 py-2 text-sm font-medium text-gold-2">
                  {trial ? "3-day classroom" : "Classroom"}
                </a>
              ) : (
                <a href="/pay" className="cta-pulse rounded-full bg-gold px-4 py-2 text-sm font-bold text-forest">
                  Enter classroom
                </a>
              )}
            </>
          ) : (
            <>
              <a href="/login" className="text-sm font-medium text-forest">
                Sign in
              </a>
              <a
                href="/register"
                className="cta-pulse rounded-full bg-gold px-5 py-2 text-sm font-bold text-forest"
              >
                Join
              </a>
            </>
          )}
        </div>
        <div className="flex items-center gap-2 md:hidden">
          {!user ? (
            <a
              href="/register"
              className="rounded-full bg-gold px-4 py-2 text-sm font-extrabold uppercase tracking-wide text-forest"
            >
              Join
            </a>
          ) : !paid ? (
            <a
              href="/pay"
              className="rounded-full bg-gold px-4 py-2 text-sm font-extrabold uppercase tracking-wide text-forest"
            >
              Enter
            </a>
          ) : null}
          <MobileNav signedIn={Boolean(user)} isAdmin={admin} paid={paid} name={user?.name} />
        </div>
      </div>
    </header>
  );
}