"use client";

import { usePathname, useRouter } from "next/navigation";
import { ChevronDown, KeyRound, LogOut, UserRound } from "lucide-react";
import { toast } from "react-toastify";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useAuth } from "@/lib/auth-context";
import { useLanguage } from "@/lib/i18n";

export function HeaderProfileMenu({
  fallbackName,
  initial,
}: {
  fallbackName: string;
  initial: string;
}) {
  const { user, logout } = useAuth();
  const { t } = useLanguage();
  const router = useRouter();
  const pathname = usePathname();

  const isAdmin = user?.role === "admin";
  const adminSource = pathname === "/admin/settings" ? "settings" : "dashboard";
  const displayName = user?.name || fallbackName;
  const displayInitial = user?.name?.charAt(0) || initial;

  const handleLogout = async () => {
    const result = await logout();

    if (result.success) {
      toast.success(result.message || "Logout successfully.");
    } else {
      toast.error(result.message || "Logout failed.");
    }
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          className="h-11 rounded-full border-[var(--theme-border-strong)] bg-white px-2 pr-4 shadow-sm"
        >
          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-[var(--theme-secondary)] to-[var(--theme-accent)] text-sm font-black text-white">
            {displayInitial}
          </span>
          <span className="hidden max-w-32 truncate text-sm font-bold text-foreground sm:inline">
            {displayName}
          </span>
          <ChevronDown className="h-4 w-4 text-muted-foreground" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="end"
        className="w-56 rounded-2xl border-[var(--theme-border)] p-2 shadow-xl"
      >
        <div className="px-3 py-3">
          <p className="truncate text-sm font-black">{displayName}</p>
          <p className="mt-1 truncate text-xs text-muted-foreground">
            {user?.email}
          </p>
        </div>
        <DropdownMenuSeparator />
        <DropdownMenuItem
          onClick={() =>
            router.push(
              isAdmin
                ? `/admin/update-profile?from=${adminSource}`
                : "/dashboard/update-profile",
            )
          }
          className="cursor-pointer rounded-xl py-2.5"
        >
          <UserRound className="mr-2 h-4 w-4 text-[var(--theme-primary)]" />
          {t("admin.updateProfile")}
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() =>
            router.push(
              isAdmin
                ? `/admin/change-password?from=${adminSource}`
                : "/dashboard/change-password",
            )
          }
          className="cursor-pointer rounded-xl py-2.5"
        >
          <KeyRound className="mr-2 h-4 w-4 text-[var(--theme-primary)]" />
          {t("admin.changePassword")}
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem
          onClick={handleLogout}
          className="cursor-pointer rounded-xl py-2.5 text-red-600 focus:text-red-600"
        >
          <LogOut className="mr-2 h-4 w-4" />
          {t("common.logout")}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}