"use client";

import { useState, useEffect } from "react";
import { FiMoreVertical } from "react-icons/fi";
import ChatBoldIcon from "./ChatBoldIcon";
import { motion, AnimatePresence } from "framer-motion";
import { User } from "@/types/types";
import useAxios from "@/hooks/useAxios";
import { cn } from "@/lib/utils";

interface ChatHeaderMenuProps {
  user: User | undefined;
  onSearchToggle: (open: boolean) => void;
  searchOpen: boolean;
  onBlockChange?: (blocked: boolean) => void;
  buttonClassName?: string;
  onStartDeleteMode?: () => void;
}

export default function ChatHeaderMenu({
  user,
  onSearchToggle,
  searchOpen,
  onBlockChange,
  buttonClassName,
  onStartDeleteMode,
}: ChatHeaderMenuProps) {
  const [open, setOpen] = useState(false);
  const [isBlocked, setIsBlocked] = useState(Boolean(user?.is_blocked));
  const { request } = useAxios();

  useEffect(() => {
    setIsBlocked(Boolean(user?.is_blocked));
  }, [user?.is_blocked, user?._id]);

  const block = async () => {
    await request("POST", "/users/block", { user_to_block: user?._id });
    setIsBlocked(true);
    onBlockChange?.(true);
    setOpen(false);
  };

  const unblock = async () => {
    await request("POST", "/users/unblock", { user_to_unblock: user?._id });
    setIsBlocked(false);
    onBlockChange?.(false);
    setOpen(false);
  };

  return (
    <div className={cn("relative shrink-0", open && "z-[110]")}>
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        className={cn(buttonClassName, "relative")}
        aria-label="منو"
      >
        <FiMoreVertical size={20} strokeWidth={2.5} />
      </button>
      <AnimatePresence>
        {open && (
          <>
            <div
              className="fixed inset-0 z-[105]"
              onClick={() => setOpen(false)}
              aria-hidden
            />
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: -4 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95 }}
              className="glass-panel absolute left-0 top-full z-[110] mt-1 min-w-[160px] overflow-hidden rounded-2xl py-1 shadow-xl"
            >
              <button
                type="button"
                className="flex w-full items-center gap-2 px-4 py-2.5 text-right text-sm hover:bg-black/5 dark:hover:bg-white/10"
                onClick={() => {
                  onSearchToggle(!searchOpen);
                  setOpen(false);
                }}
              >
                <ChatBoldIcon name="search" size={16} />
                جستجو در چت
              </button>
              <button
                type="button"
                className="flex w-full items-center gap-2 px-4 py-2.5 text-right text-sm text-red-500 hover:bg-black/5 dark:hover:bg-white/10"
                onClick={() => {
                  onStartDeleteMode?.();
                  setOpen(false);
                }}
              >
                <ChatBoldIcon name="delete" size={16} className="text-red-500" />
                حذف
              </button>
              {isBlocked ? (
                <button
                  type="button"
                  className="w-full px-4 py-2.5 text-right text-sm text-green-600"
                  onClick={unblock}
                >
                  رفع مسدودیت
                </button>
              ) : (
                <button
                  type="button"
                  className="w-full px-4 py-2.5 text-right text-sm text-red-500"
                  onClick={block}
                >
                  مسدود کردن
                </button>
              )}
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
}
