import Link from "next/link";
import { LogIn, UserPlus, ShieldCheck, User, LogOut } from "lucide-react";
import { auth } from "@/lib/auth/auth";
import { signOutAction } from "@/app/account/actions";

/**
 * Sign in / Apply to join / Account CTAs for the mobile drawer.
 *
 * The main HeaderAuth row is hidden below the `md` breakpoint so the header
 * bar doesn't overflow. This component mirrors that logic but styled for the
 * full-width drawer list.
 */
export async function MobileAuthCTA() {
  const session = await auth().catch(() => null);
  const role = (session?.user as { role?: string } | undefined)?.role;

  if (!session?.user) {
    return (
      <div className="mt-6 border-t border-[var(--color-line)] px-4 pt-5">
        <div className="mb-3 text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
          Account
        </div>
        <div className="flex flex-col gap-3">
          <Link
            href="/login"
            className="inline-flex items-center justify-center gap-2 rounded-md border border-[var(--color-line)] bg-white px-4 py-3 text-[14px] font-semibold text-[var(--color-ink)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
          >
            <LogIn size={16} strokeWidth={1.75} aria-hidden />
            Sign in
          </Link>
          <Link
            href="/join"
            className="inline-flex items-center justify-center gap-2 rounded-md bg-[var(--color-blue)] px-4 py-3 text-[14px] font-semibold text-white hover:bg-[var(--color-blue-deep)]"
          >
            <UserPlus size={16} strokeWidth={1.75} aria-hidden />
            Apply to join
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="mt-6 border-t border-[var(--color-line)] px-4 pt-5">
      <div className="mb-3 text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
        Account
      </div>
      <div className="flex flex-col gap-3">
        {role === "admin" && (
          <Link
            href="/admin/applications"
            className="inline-flex items-center justify-center gap-2 rounded-md border border-[var(--color-blue)]/40 bg-[var(--color-mist)] px-4 py-3 text-[14px] font-semibold text-[var(--color-blue)] hover:bg-[var(--color-mist)]/80"
          >
            <ShieldCheck size={16} strokeWidth={1.75} aria-hidden />
            Admin
          </Link>
        )}
        <Link
          href="/account"
          className="inline-flex items-center justify-center gap-2 rounded-md border border-[var(--color-line)] bg-white px-4 py-3 text-[14px] font-semibold text-[var(--color-ink)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
        >
          <User size={16} strokeWidth={1.75} aria-hidden />
          My account
        </Link>
        <form action={signOutAction}>
          <button
            type="submit"
            className="inline-flex w-full items-center justify-center gap-2 rounded-md border border-[var(--color-line)] bg-white px-4 py-3 text-[14px] font-semibold text-[var(--color-slate)] hover:border-red-300 hover:text-red-700"
          >
            <LogOut size={16} strokeWidth={1.75} aria-hidden />
            Sign out
          </button>
        </form>
      </div>
    </div>
  );
}
