"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { ExternalLink, LogOut, Menu, ShieldCheck } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { findNavItem } from "@/components/admin/nav";
import type { SessionUser } from "@/lib/types";
import { initials } from "@/lib/utils";

export function AdminTopbar({
  user,
  onMenu,
}: {
  user: SessionUser;
  onMenu: () => void;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const [loggingOut, setLoggingOut] = useState(false);
  const nav = findNavItem(pathname);

  async function logout() {
    setLoggingOut(true);
    try {
      await fetch("/api/auth/logout", { method: "POST" });
      toast.success("Anda telah keluar");
      router.replace("/login");
      router.refresh();
    } catch {
      toast.error("Gagal keluar, coba lagi");
      setLoggingOut(false);
    }
  }

  return (
    <header className="sticky top-0 z-20 border-b border-border bg-background/85 backdrop-blur-md">
      <div className="h-0.5 w-full bg-brand-gradient opacity-80" />
      <div className="flex h-16 items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
        <div className="flex min-w-0 items-center gap-3">
          <button
            type="button"
            onClick={onMenu}
            className="rounded-lg p-2 text-muted-foreground hover:bg-muted lg:hidden"
            aria-label="Buka menu"
          >
            <Menu className="h-5 w-5" />
          </button>
          <div className="min-w-0">
            <div className="truncate text-sm font-bold text-foreground">
              {nav?.label ?? "Administrasi Desa"}
            </div>
            <div className="truncate text-xs text-muted-foreground">
              {nav?.description ?? "Panel administrasi"}
            </div>
          </div>
        </div>

        <div className="flex items-center gap-2 sm:gap-3">
          <Button asChild variant="outline" size="sm" className="hidden sm:inline-flex">
            <Link href="/" target="_blank">
              <ExternalLink className="h-3.5 w-3.5" />
              Website Desa
            </Link>
          </Button>

          <div className="hidden items-center gap-2 rounded-full border border-border bg-card py-1 pl-1 pr-3 md:flex">
            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-brand-gradient text-[10px] font-bold text-white">
              {initials(user.nama)}
            </div>
            <div className="leading-tight">
              <div className="text-xs font-semibold">{user.nama}</div>
              <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
                <ShieldCheck className="h-2.5 w-2.5" />
                {user.role}
              </div>
            </div>
          </div>

          <Button
            variant="ghost"
            size="sm"
            onClick={logout}
            disabled={loggingOut}
            className="text-muted-foreground hover:text-destructive"
          >
            <LogOut className="h-4 w-4" />
            <span className="hidden sm:inline">Keluar</span>
          </Button>
        </div>
      </div>
    </header>
  );
}