"use client";
import React, { useEffect, useState, useRef } from "react";
import Image from "next/image";
import Block from "../../../public/assets/Block.png";
import Unfollow from "../../../public/assets/Unfollow.png";
import Report from "../../../public/assets/Report.png";
import useApiPost from "@/app/hooks/postData";
import toast from "react-hot-toast";
import { useGetUserProfileDetailsQuery } from "../store/api/GetUserProfileDetails";
import Cookies from "js-cookie";
import { useGetMyAllFollowingQuery } from "../store/api/GetMyFollowing";
import { ClipLoader } from "react-spinners";
import { IoChevronForward, IoCloseOutline } from "react-icons/io5";
import { showSuccessToast } from "../components/Toast/SuccessToast";
import { showErrorToast } from "../components/Toast/ErrorToast";


function ReportProfile({ userId, userName }: { userId: string; userName: string }) {
  const token = Cookies.get("Snapta_auth_token");
  const [confirmAction, setConfirmAction] = useState<string | null>(null);
const [report, setReport] = useState<string | null>(null);
const [unfollow, setUnfollow] = useState<string | null>(null);
  const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const { data: UserData, refetch } = useGetUserProfileDetailsQuery({
    token: token || "",
  });
  const { data: MyFollowingData, refetch: MyFollowingRefetch } =
    useGetMyAllFollowingQuery({ token: token || "" });
  const [followedUsers, setFollowedUsers] = useState<{
    [key: string]: boolean;
  }>({});
  const [isLoading, setIsLoading] = useState(false);

  const { data, loading, postData } = useApiPost();
  // import React, { useEffect, useState, useRef } from "react";
  useEffect(() => {
    if (MyFollowingData?.follower) {
      const followedUserIds = MyFollowingData.follower.reduce(
        (account, follow) => {
          account[follow.follow_user_id] = true; // Store as an object for quick lookup
          return account;
        },
        {} as { [key: string]: boolean }
      );

      setFollowedUsers(followedUserIds);
    }
  }, [MyFollowingData]);
  console.log("MY Following Data 1111", MyFollowingData);
  // Inside the component
  const dialogRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (dialogRef.current && !dialogRef.current.contains(event.target)) {
        setConfirmAction(null);
        setUnfollow(null);
        setReport(null);
        setIsDialogOpen(false);
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
const [reportTextList, setReportTextList] = useState<any[]>([]);

const handleReport = async () => {
  setIsLoading(true);
  setReport("report");
  setSelectedReportId(null); // reset selection

  try {
    const response = await postData("/get_report_text", { type: "user" });
    setReportTextList(response?.all_report_text || []);
  } catch (error) {
    showErrorToast("Failed to load report options");
  } finally {
    setIsLoading(false);
  }
};
 
 

 const handleConfirmReport = async () => {
  if (!selectedReportId) return;

  try {
  const response = await postData("/user_add_report", {
      to_user_id: userId,
      report_text_id: selectedReportId,
    });

    showSuccessToast(response?.message);

    window.dispatchEvent(
      new CustomEvent("profileUpdated", {
        detail: { type: "report" },
      })
    );

  } catch (error) {
    showErrorToast("Failed to report.", "Something went wrong.");
  }

  setIsDialogOpen(false);
  setReport(null);
};

  const handleProfile = async () => {
    await postData("/second_user_profile", { to_user_id: userId });
  };

const handleUnfollowUser = async () => {
  setUnfollow(null);
  try {
    const response = await postData("/follow", { to_user: userId });
    showSuccessToast(response?.message);

  window.dispatchEvent(
  new CustomEvent("profileUpdated", {
    detail: {
      type: "unfollow",
      source: "external", // ✅ IMPORTANT
    },
  })
);

    // refetch();
    // MyFollowingRefetch();
  } catch (error: any) {}
};

const handleBlockUser = async () => {
  setIsLoading(true);
  setConfirmAction(null);
  try {
    const response = await postData("/profile_blocked", {
      block_user_id: userId,
    });
    showSuccessToast(response?.message);

   window.dispatchEvent(
  new CustomEvent("profileUpdated", {
    detail: { type: "block" },
  })
);// ✅ ADD

  } catch (error: any) {
  } finally {
    setIsLoading(false);
  }
};



useEffect(() => {
  if (confirmAction || unfollow || report || isDialogOpen) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "auto";
  }

  return () => {
    document.body.style.overflow = "auto";
  };
}, [confirmAction, unfollow, report, isDialogOpen]);


  return (
    <>
    {/* Remove p-4 from the container and use w-full */}
<div className="flex flex-col w-full ">
  {/* Report */}
  <button
    className="flex items-center w-full gap-3 px-4 py-3 transition-colors duration-200 cursor-pointer group hover:bg-red-50 dark:hover:bg-red-950/30 hover:rounded-[5px]"
    onClick={() => handleReport()}
  >
    <Image src={Report} alt="report" className="w-6 h-6 transition-transform group-hover:scale-105" />
    <p className="text-[#FF2525] font-gilroy_semibold text-base">
      Report
    </p>
  </button>

  {/* Block */}
  <button
    className="flex items-center w-full gap-3 px-4 py-3 transition-colors duration-200 cursor-pointer group hover:bg-red-50 dark:hover:bg-red-950/30 hover:rounded-[5px]"
    onClick={() => setConfirmAction("block")}
  >
    <Image src={Block} alt="block" className="w-6 h-6 transition-transform group-hover:scale-105" />
    <p className="text-[#FF2525] font-gilroy_semibold text-base">Block</p>
  </button>

  {/* Unfollow */}
  {followedUsers[userId] && (
    <button
      className="flex items-center w-full gap-3 px-4 py-3 transition-colors duration-200 cursor-pointer group hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_94%)] hover:rounded-[5px]"
      onClick={() => setUnfollow("unfollow")}
    >
      <Image src={Unfollow} alt="unfollow" className="w-6 h-6 img-theme transition-transform group-hover:scale-105" />
      <p className="font-gilroy_md text-base text-[var(--text-primary)]">Unfollow</p>
    </button>
  )}
</div>

      {/* Confirmation Dialog */}
    {confirmAction && (
  <div className="fixed inset-0 flex items-center justify-center bg-black/70 backdrop-blur-sm z-[150] p-4">
    <div
      ref={dialogRef}
      className="bg-[var(--modal-color)] rounded-[10px] shadow-3xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden animate-in fade-in zoom-in duration-200"
    >
      {/* Header */}
      <div className="relative  h-[50px] -mb-3 flex items-center justify-center">
        <button 
          onClick={() => setConfirmAction(null)}
          className="absolute left-4 text-[var(--text-primary)] hover:opacity-70 transition"
        >
          {/* <IoCloseOutline size={32} strokeWidth={1} /> */}
        </button>
        <h2 className="text-[var(--text-primary)] font-medium text-[17px] mt-1">
          Block Profile
        </h2>
      </div>

      {/* Body */}
      <div className=" text-center">
         <h3 className="text-[var(--text-primary)] font-normal text-[16px] p-3 border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)]">
         Are you sure you want to Block <span className="text-[var(--text-secondary)] font-semibold text-[17px] mt-1 ">
          "{userName}"
        </span>
        </h3>
        

        {/* Actions */}
        <div className="flex gap-4  p-4 justify-center">
          <button
            className="px-10 py-2 rounded-xl text-[var(--text-primary)] font-medium border border-[var(--border-colordark)] hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)] transition"
            onClick={() => setConfirmAction(null)}
          >
            Cancel
          </button>
          <button
            className="px-12 py-2 text-white font-medium rounded-xl bg-gradient-custom transition flex items-center justify-center min-w-[100px]"
            onClick={() => {
              console.log(confirmAction === "block" ? "User blocked" : "User unfollowed");
              handleBlockUser();
            }}
          >
            {isLoading ? (
              <ClipLoader loading={isLoading} color="#FFFFFF" size={18} />
            ) : (
              "Block"
            )}
          </button>
        </div>
      </div>
    </div>
  </div>
)}

   {unfollow && (
  <div className="fixed inset-0 flex items-center justify-center bg-black/70 backdrop-blur-sm z-[150] p-4">
    <div
      ref={dialogRef}
      className="bg-[var(--modal-color)] rounded-[10px] shadow-3xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden animate-in fade-in zoom-in duration-200"
    >
      {/* Header */}
      <div className="relative  h-[50px] -mb-3 flex items-center justify-center">
        <button 
          onClick={() => setUnfollow(null)}
          className="absolute left-4 text-[var(--text-primary)] hover:opacity-70 transition"
        >
          {/* <IoCloseOutline size={32} strokeWidth={1} /> */}
        </button>
        <h2 className="text-[var(--text-primary)] font-medium text-[17px] mt-1">
          Unfollow Profile
        </h2>
      </div>

      {/* Body */}
      <div className=" text-center">
        <h3 className="text-[var(--text-primary)] font-normal text-[16px] p-3 border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)]">
          Are you sure you want to Unfollow   <span className="text-[var(--text-secondary)] font-semibold text-[17px] mt-1 ">
          "{userName}" ?
        </span>
        </h3>
      

        {/* Actions */}
        <div className="flex gap-4  p-4 justify-center">
          <button
            className="px-10 py-2 rounded-xl text-[var(--text-primary)] font-medium border border-[var(--border-colordark)] hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)] transition"
            onClick={() => setUnfollow(null)}
          >
            Cancel
          </button>
          <button
            className="px-12 py-2 text-white font-medium rounded-xl bg-gradient-custom transition min-w-[100px]"
            onClick={() => {
              console.log(
                confirmAction === "block"
                  ? "User blocked"
                  : "User unfollowed"
              );
              handleUnfollowUser();
            }}
          >
            Unfollow
          </button>
        </div>
      </div>
    </div>
  </div>
)}

      {report && (
        <div className="fixed inset-0 flex items-center justify-center bg-black/70 backdrop-blur-sm z-[150] p-4">
          <div
            ref={dialogRef}
            className="bg-[var(--modal-color)] rounded-[10px] shadow-3xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden animate-in fade-in zoom-in duration-200"
          >
            <div className="relative border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] h-[50px] flex items-center justify-center">
              <button 
                onClick={() => setReport(null)}
                className="absolute left-4 text-[var(--text-primary)] hover:opacity-70"
              >
                <IoCloseOutline size={32} strokeWidth={1} />
              </button>
              <h2 className="text-[var(--text-primary)] font-medium text-[17px] mt-1">
                Report Profile
              </h2>
            </div>
            <div className="px-4 pt-4 pb-2 border-b border-[var(--border-colordark)]">
              <h3 className="text-[var(--text-primary)] font-medium text-[16px]">
                Why are you reporting this profile?
              </h3>
            </div>
            <div className="max-h-[400px] overflow-y-auto">
              {isLoading ? (
                <div className="flex justify-center items-center py-10">
                  <ClipLoader color="var(--text-primary)" size={25} />
                </div>
              ) : (
               reportTextList?.map((report) => (
                  <button
                    key={report.id}
                    onClick={() => {
                      setSelectedReportId(report.id);
                      setIsDialogOpen(true);
                    }}
                    className="w-full flex items-center justify-between px-4 border-b border-[var(--border-colordark)] py-4 hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)] text-left"
                  >
                    <span className="text-[var(--text-primary)] text-[15px] font-normal">
                      {report.text}
                    </span>
                    <IoChevronForward className="text-[var(--text-secondary)]" size={20} />
                  </button>
                ))
              )}
            </div>
          </div>
        </div>
      )}

      {isDialogOpen && (
  <div className="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm z-[200] p-4">
    <div
      ref={dialogRef}
      className="bg-[var(--modal-color)] rounded-[10px] shadow-3xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden animate-in fade-in zoom-in duration-200"
    >
      {/* Header */}
      <div className="relative  h-[50px] flex items-center justify-center">
        <button
          onClick={() => setIsDialogOpen(false)}
          className="absolute left-4 text-[var(--text-primary)] hover:opacity-70"
        >
          {/* <IoCloseOutline size={32} strokeWidth={1} /> */}
        </button>
        <h2 className="text-[var(--text-primary)] font-medium text-[17px] mt-1 -mb-2">
          Report Confirmation
        </h2>
      </div>

      {/* Body */}
      <div className=" text-center ">
       <h3 className="text-[var(--text-primary)] font-normal text-[16px] p-3 -mt-2 border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)]">
            Are you sure you want to report this user?
        </h3>
        
        {/* Actions */}
        <div className="flex gap-4  p-4 justify-center">
          <button
            className="px-10 py-2 rounded-xl text-[var(--text-primary)] font-medium border border-[var(--border-colordark)] hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)] transition"
            onClick={() => setIsDialogOpen(false)}
          >
            Cancel
          </button>
          <button
            className="px-12 py-2 text-white font-medium rounded-xl bg-gradient-custom transition"
            onClick={handleConfirmReport}
          >
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
)}
    </>
  );
}

export default ReportProfile;