import { useState, useRef, useEffect } from "react";
import { FaSignature, FaDownload, FaUserEdit, FaTimesCircle } from "react-icons/fa";
import { BsThreeDotsVertical } from "react-icons/bs";

interface Props {
  transparentTags?: boolean;
  hideTags?: boolean;
  handleFormSubmit: () => void;
  onDownloadClick?: () => void;
  onDeclineClick?: () => void;
  onReassignClick?: () => void;
}

export default function SignButton({
  transparentTags,
  hideTags,
  handleFormSubmit,
  onDownloadClick,
  onDeclineClick,
  onReassignClick,
}: Props) {
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  // Close menu on outside click
  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        setMenuOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  return (
    <div className="relative inline-block" ref={menuRef}>
      {(!transparentTags && !hideTags) ? (
        <div className="flex items-center">
          {/* Sign Button */}
          <button
            onClick={handleFormSubmit}
            className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-md bg-[var(--primary)] hover:opacity-90 transition text-white outline-none"
          >
            <span id="sign-client-side-btn" className="tracking-wide">
              Sign
            </span>
            <FaSignature className="text-md" />
          </button>

          {/* Three Dots Dropdown Trigger */}
          <button
            onClick={() => setMenuOpen((prev) => !prev)}
            className="ml-2 p-2 rounded-full hover:bg-gray-100 focus:outline-none transition"
          >
            <BsThreeDotsVertical className="text-gray-600 text-lg cursor-pointer" />
          </button>

          {/* Dropdown Menu */}
          {menuOpen && (
            <div
              tabIndex={0}
              onBlur={() => setMenuOpen(false)} // close on blur
              className="absolute right-0 top-10 w-56 bg-white border border-gray-200 rounded-lg shadow-lg z-10"
            >
              <ul className="py-1 text-sm text-gray-700">
                <li>
                  <button
                    onClick={() => {
                      onDownloadClick?.();
                      setMenuOpen(false);
                    }}
                    className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100"
                  >
                    <FaDownload className="text-blue-500" />
                    <span>Download Document</span>
                  </button>
                </li>
                <li>
                  <button
                    onClick={() => {
                      onReassignClick?.();
                      setMenuOpen(false);
                    }}
                    className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100"
                  >
                    <FaUserEdit className="text-yellow-500" />
                    <span>Reassign</span>
                  </button>
                </li>
                <li>
                  <button
                    onClick={() => {
                      onDeclineClick?.();
                      setMenuOpen(false);
                    }}
                    className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100 text-red-500 border-t border-gray-200"
                  >
                    <FaTimesCircle />
                    <span>Decline</span>
                  </button>
                </li>
              </ul>
            </div>
          )}
        </div>
      ) : (
        <p className="text-xs text-green-600 font-medium">Signed Successfully</p>
      )}
    </div>
  );
}