"use client";

import { useEffect, useRef, useState } from "react";
import { NotebookTabs, LogOut, Trash2, Magnet } from "lucide-react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { deleteAdminProfile } from "@/services/profile";


interface Admin {
  name?: string;
  email?: string;
  role?: string;
}


export default function AdminProfileDropdown() {

  const router = useRouter();

  const [open, setOpen] = useState(false);

  const [admin, setAdmin] = useState<Admin | null>(null);


  const dropdownRef =
    useRef<HTMLDivElement>(null);



  useEffect(() => {

    const storedAdmin =
      localStorage.getItem("admin");


    if(storedAdmin){

      setAdmin(
        JSON.parse(storedAdmin)
      );
    }
  }, []);

  // close dropdown outside click

  useEffect(()=>{

    function handleClick(
      e:MouseEvent
    ){
      if(
        dropdownRef.current &&
        !dropdownRef.current.contains(
          e.target as Node
        )
      ){
        setOpen(false);
      }
    }
    document.addEventListener(
      "mousedown",
      handleClick
    );

    return()=>{
      document.removeEventListener(
        "mousedown",
        handleClick
      );
    };
  },[]);

  const logout = ()=>{
    localStorage.removeItem(
      "token"
    );
    localStorage.removeItem(
      "admin"
    );
    toast.success(
      "Logged out successfully"
    );
    router.push("/login");
  };
  const deleteAccount = async()=>{
  const confirmDelete =
    window.confirm(
      "Are you sure you want to permanently delete this admin account?"
    );
  if(!confirmDelete)
    return;
  try{
    await deleteAdminProfile();
    localStorage.removeItem("token");
    localStorage.removeItem("admin");
    toast.success(
      "Admin account deleted"
    );
    router.push("/login");
  }catch(error){
    console.error(error);
    toast.error(
      "Failed to delete account"
    );
  }
};

  return (
    <div
      ref={dropdownRef}
      className="relative"
    >
      <button
        onClick={()=>setOpen(!open)}
        className="flex items-center gap-3"
      >
        <div className="h-10 w-10 rounded-full bg-[#C9A227] text-white flex items-center justify-center font-semibold">
          {admin?.name?.charAt(0) || "A"}
        </div>
      </button>
      {
        open && (
          <div
            className="absolute right-0 mt-3 w-72 rounded-2xl bg-white border shadow-xl p-5 z-50">
            <div className="border-b pb-4 mb-4">
              <p className="font-bold text-lg">
                {admin?.name || "Admin"}
              </p>
              <p className="text-sm text-gray-500">
                {admin?.email || ""}
              </p>
              <span
                className="inline-block mt-2 rounded-full bg-yellow-100 px-3 py-1 text-xs font-semibold text-yellow-700">
                {admin?.role || ""}
              </span>
            </div>
            <button
              onClick={logout}
              className="
              flex
              w-full
              items-center
              gap-3
              rounded-xl
              px-4
              py-3
              text-gray-700
              hover:bg-gray-100
              "
            >
              <LogOut size={18}/>
              Logout
            </button>
            <button
              onClick={deleteAccount}
              className="
              mt-2
              flex
              w-full
              items-center
              gap-3
              rounded-xl
              px-4
              py-3
              text-red-600
              hover:bg-red-50
              "
            >
              <Trash2 size={18}/>
              Delete Account
            </button>
          </div>
        )
      }
    </div>
  );
}