import Link from "next/link";
import { auth } from "@/lib/auth/auth";
import { signOutAction } from "@/app/account/actions";

export async function HeaderAuth() {
  const session = await auth().catch(() => null);
  const role = (session?.user as { role?: string } | undefined)?.role;

  if (!session?.user) {
    return (
      // Hidden on mobile — MobileAuthCTA renders these inside the drawer
      // instead, so the header bar doesn't overflow on narrow phones.
      <div className="hidden items-center gap-3 md:flex">
        <Link
          href="/login"
          className="text-sm font-semibold text-[var(--color-ink)] hover:text-[var(--color-blue)] transition-colors"
        >
          Sign in
        </Link>
        <Link
          href="/join"
          className="rounded-md bg-[var(--color-blue)] px-4 py-2 text-sm font-semibold text-white hover:bg-[var(--color-blue-deep)] transition-colors"
        >
          Apply to join
        </Link>
      </div>
    );
  }

  return (
    <div className="hidden items-center gap-3 md:flex">
      {role === "admin" && (
        <Link
          href="/admin/applications"
          className="text-sm font-semibold text-[var(--color-blue)] hover:text-[var(--color-blue-deep)] transition-colors"
        >
          Admin
        </Link>
      )}
      <Link
        href="/account"
        className="text-sm font-semibold text-[var(--color-ink)] hover:text-[var(--color-blue)] transition-colors"
      >
        Account
      </Link>
      <form action={signOutAction}>
        <button
          type="submit"
          className="text-sm font-semibold text-[var(--color-slate)] hover:text-red-700 transition-colors"
        >
          Sign out
        </button>
      </form>
    </div>
  );
}
