"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { User, LogOut, Settings, UserCog } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { getProfileAction } from "@/features/users/actions/profile-actions";
import { getStorageUrl } from "@/lib/utils";

const ADMIN_PROFILE_IMAGE_UPDATED_EVENT = "admin-profile-image-updated";

function getProfileImageSrc(value: string | null | undefined, cacheKey?: number) {
  if (!value?.trim()) return null;
  if (value.startsWith("data:") || value.startsWith("blob:")) return value;
  const imageUrl = getStorageUrl(value);
  if (!cacheKey) return imageUrl;
  const separator = imageUrl.includes("?") ? "&" : "?";
  return `${imageUrl}${separator}v=${cacheKey}`;
}

export function AdminUserMenu() {
  const router = useRouter();
  const [adminEmail, setAdminEmail] = useState("info@ameeraholidays.com");
  const [adminName, setAdminName] = useState("Admin Account");
  const [profileImage, setProfileImage] = useState<string | null>(null);

  useEffect(() => {
    let isMounted = true;

    const fetchProfile = async () => {
      try {
        // Read email from cookie
        try {
          const cookies = document.cookie.split(";");
          const sessionCookie = cookies.find((c) =>
            c.trim().startsWith("admin_session=")
          );
          if (sessionCookie) {
            const value = sessionCookie.split("=")[1];
            const parsed = JSON.parse(decodeURIComponent(value));
            if (parsed.email && isMounted) setAdminEmail(parsed.email);
          }
        } catch {
          // Keep default
        }

        const result = await getProfileAction();
        if (!isMounted || !result.success || !result.data) return;

        const user = result.data;
        if (user.email) setAdminEmail(user.email);
        const name = user.name ||
          `${user.first_name || ""} ${user.last_name || ""}`.trim();
        if (name) setAdminName(name);
        setProfileImage(getProfileImageSrc(user.profile_image));
      } catch {
        // Keep defaults
      }
    };

    const handleProfileImageUpdated = (event: Event) => {
      const detail = (event as CustomEvent<{ profileImage?: string | null }>).detail;
      setProfileImage(getProfileImageSrc(detail?.profileImage, Date.now()));
    };

    fetchProfile();
    window.addEventListener(ADMIN_PROFILE_IMAGE_UPDATED_EVENT, handleProfileImageUpdated);
    return () => {
      isMounted = false;
      window.removeEventListener(ADMIN_PROFILE_IMAGE_UPDATED_EVENT, handleProfileImageUpdated);
    };
  }, []);

  const handleLogout = () => {
    if (typeof window !== "undefined") {
      sessionStorage.removeItem("admin_session");
      document.cookie = "admin_session=; path=/; max-age=0; SameSite=Strict";
    }
    router.push("/");
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className="rounded-xl ring-2 ring-border hover:ring-primary/30 transition-all h-10 w-10"
          aria-label="Open user menu"
        >
          <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center overflow-hidden">
            {profileImage ? (
              <Image
                src={profileImage}
                alt={adminName}
                width={32}
                height={32}
                className="h-full w-full object-cover"
              />
            ) : (
              <User className="h-4 w-4 text-primary" aria-hidden="true" />
            )}
          </div>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-60 p-2">
        <DropdownMenuLabel className="font-normal p-3 bg-muted/50 rounded-lg mb-2">
          <div className="flex flex-col space-y-1">
            <p className="text-sm font-semibold leading-none">{adminName}</p>
            <p className="text-xs leading-none text-muted-foreground">
              {adminEmail}
            </p>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuItem asChild className="rounded-lg py-2.5 cursor-pointer">
          <Link href="/admin/settings">
            <Settings className="mr-3 h-4 w-4" aria-hidden="true" />
            Admin Settings
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild className="rounded-lg py-2.5 cursor-pointer">
          <Link href="/admin/profile">
            <UserCog className="mr-3 h-4 w-4" aria-hidden="true" />
            Manage Profile
          </Link>
        </DropdownMenuItem>
        <DropdownMenuSeparator className="my-2" />
        <DropdownMenuItem
          onClick={handleLogout}
          className="rounded-lg py-2.5 cursor-pointer text-destructive focus:text-destructive focus:bg-destructive/10"
        >
          <LogOut className="mr-3 h-4 w-4" aria-hidden="true" />
          Logout
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}