"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronDown, LogOut, Plus, ShieldCheck, UserCog, Wallet, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ThemeToggle } from "@/components/shared/theme-toggle";
import { signOutAction } from "@/lib/actions/auth";
import { panelTexts } from "@/lib/i18n/panel";
import {
  activePanelItem,
  isAdminRoleName,
  roleLabel,
  userInitials,
  type PanelUser,
} from "@/lib/panel-nav";
import { PanelMobileNav } from "@/components/panel/mobile-nav";
import { cn } from "@/lib/utils";

export function PanelHeader({ user }: { user: PanelUser }) {
  const pathname = usePathname();
  const current = activePanelItem(pathname);
  const signOutForm = React.useRef<HTMLFormElement>(null);
  const isAdmin = isAdminRoleName(user.role);

  return (
    <header className="flex h-16 items-center gap-2 border-b border-border bg-background/85 px-3 backdrop-blur-md sm:px-6">
      {/* Hidden form so the dropdown item can submit a real server action. */}
      <form ref={signOutForm} action={signOutAction} className="hidden" />

      <PanelMobileNav />

      <Link href="/" className="flex items-center gap-2 lg:hidden">
        <span className="grid size-8 shrink-0 place-items-center rounded-lg bg-blue-600">
          <Zap className="size-4 text-white" fill="currentColor" strokeWidth={1.5} />
        </span>
        <span className="font-display text-[15px] font-semibold tracking-tight">
          {panelTexts.brand}
        </span>
      </Link>

      {/* Not an <h1>: pages own their heading via <PageHeader>. */}
      <div className="hidden truncate font-display text-base font-semibold tracking-tight lg:block">
        {current?.label ?? panelTexts.brand}
      </div>

      <div className="ml-auto flex items-center gap-1.5 sm:gap-2">
        <Link
          href="/addfunds"
          title={`${panelTexts.header.balance}: ${user.balance}`}
          className={cn(
            "group inline-flex h-9 items-center gap-2 rounded-lg border border-border bg-card pr-1.5 pl-2.5 shadow-sm transition-colors",
            "hover:border-blue-600/40 hover:bg-accent",
          )}
        >
          <Wallet className="size-4 shrink-0 text-blue-600" />
          <span className="font-mono text-sm font-semibold tabular text-foreground">
            {user.balance}
          </span>
          <span className="grid size-6 shrink-0 place-items-center rounded-md bg-blue-600/10 text-blue-600 transition-colors group-hover:bg-blue-600 group-hover:text-white">
            <Plus className="size-3.5" />
          </span>
          <span className="sr-only">{panelTexts.header.addFunds}</span>
        </Link>

        <ThemeToggle className="size-9" />

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              type="button"
              variant="ghost"
              size="lg"
              aria-label={panelTexts.header.userMenu}
              className="h-9 gap-2 px-1.5 sm:pr-2"
            >
              <span className="grid size-7 shrink-0 place-items-center rounded-full bg-blue-600 text-[11px] font-semibold text-white">
                {userInitials(user)}
              </span>
              <span className="hidden max-w-[9rem] truncate text-sm font-medium sm:block">
                {user.username}
              </span>
              <ChevronDown className="hidden size-4 opacity-60 sm:block" />
            </Button>
          </DropdownMenuTrigger>

          <DropdownMenuContent align="end" className="w-60">
            <div className="px-2 py-1.5">
              <p className="truncate text-sm font-semibold">{user.username}</p>
              <p className="truncate text-xs text-muted-foreground">
                {user.email || roleLabel(user.role)}
              </p>
              <p className="mt-2 flex items-center justify-between gap-2 rounded-md bg-muted px-2 py-1">
                <span className="text-[11px] tracking-wider text-muted-foreground uppercase">
                  {panelTexts.header.balance}
                </span>
                <span className="font-mono text-xs font-semibold tabular">{user.balance}</span>
              </p>
            </div>

            <DropdownMenuSeparator />

            <DropdownMenuItem asChild>
              <Link href="/account" className="cursor-pointer">
                <UserCog className="size-4" />
                {panelTexts.header.account}
              </Link>
            </DropdownMenuItem>

            <DropdownMenuItem asChild>
              <Link href="/addfunds" className="cursor-pointer">
                <Wallet className="size-4" />
                {panelTexts.header.addFunds}
              </Link>
            </DropdownMenuItem>

            {isAdmin ? (
              <DropdownMenuItem asChild>
                <Link href="/admin" className="cursor-pointer">
                  <ShieldCheck className="size-4" />
                  {panelTexts.header.adminPanel}
                </Link>
              </DropdownMenuItem>
            ) : null}

            <DropdownMenuSeparator />

            <DropdownMenuItem
              variant="destructive"
              className="cursor-pointer"
              onSelect={() => signOutForm.current?.requestSubmit()}
            >
              <LogOut className="size-4" />
              {panelTexts.header.signOut}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
}

export default PanelHeader;