"use client";

import { useSession, signOut } from "next-auth/react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/ThemeToggle";

export function Navbar() {
  const { data: session } = useSession();
  const role = (session?.user as { role?: "admin" | "superadmin" } | undefined)?.role;

  return (
    <header className="border-b border-border bg-card">
      <a
        href="#main"
        className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:rounded focus:bg-primary focus:text-primary-foreground focus:px-3 focus:py-1.5 focus:text-sm focus:font-medium"
      >
        Skip to content
      </a>
      <div className="max-w-5xl mx-auto flex items-center justify-between px-3 sm:px-6 py-2.5 sm:py-3">
        <Link href="/" className="font-bold text-primary text-base sm:text-lg tracking-tight">
          HurkiCorgi MC
        </Link>
        <div className="flex items-center gap-1 sm:gap-2">
          <ThemeToggle />
          {session ? (
            <>
              {role && (
                <span
                  className={`hidden sm:inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide border ${
                    role === "superadmin"
                      ? "border-amber-500/40 bg-amber-500/10 text-amber-300"
                      : "border-border bg-muted text-muted-foreground"
                  }`}
                  title={`Signed in as ${session.user?.name} (${role})`}
                >
                  {role === "superadmin" ? "Super" : "Admin"}
                </span>
              )}
              <Button variant="ghost" size="sm" render={<Link href="/admin" />}>
                Admin
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => signOut({ callbackUrl: "/" })}
                className="text-muted-foreground"
              >
                Logout
              </Button>
            </>
          ) : (
            <Button variant="ghost" size="sm" render={<Link href="/login" />}>
              Login
            </Button>
          )}
        </div>
      </div>
    </header>
  );
}