"use client";
import React, { useEffect, useState, useMemo } from "react";
import Cookies from "js-cookie";
import { useGetMyAllFollowingQuery } from "../store/api/GetMyFollowing";
import { useAppDispatch, useAppSelector } from "../hooks/hooks";
import { hideModal } from "../store/Slice/modalSlice";
import TextTranslate from "../utils/TextTranslate";
import { X } from "lucide-react";

function TaggedPeopleList() {
  const dispatch = useAppDispatch();
  const token = Cookies.get("Snapta_auth_token");

  const { data: MyFollowingData, isLoading } = useGetMyAllFollowingQuery({
    token: token || "",
  });

  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);

  // Load selected users from localStorage on mount
  useEffect(() => {
    const storedUsers = JSON.parse(
      localStorage.getItem("selectedUsers") || "[]"
    );
    setSelectedUsers(storedUsers);
  }, []);

  const selectedUserDetails = useMemo(() => {
    return (
      MyFollowingData?.follower?.filter((user) =>
        selectedUsers.includes(user.to_user)
      ) || []
    );
  }, [MyFollowingData, selectedUsers]);

  const handleRemoveUser = (userId: string) => {
    setSelectedUsers((prevUsers) => {
      const updated = prevUsers.filter((id) => id !== userId);
      localStorage.setItem("selectedUsers", JSON.stringify(updated));

      if (selectedUsers.length === 1) {
        dispatch(hideModal("TaggedPeopleList"));
        window.dispatchEvent(new Event("storage")); 
      }
      return updated;
    });
  };

  const close = () => {
    dispatch(hideModal("TaggedPeopleList"));
    window.dispatchEvent(new Event("storage")); 
  };

  const isTaggedPeopleModalVisible = useAppSelector(
    (state) => state.modals.TaggedPeopleList
  );

  if (!isTaggedPeopleModalVisible) return null;

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-[9999] p-4">
      {/* Container: Matches TagPeople/BlockContacts exactly */}
      <div className="bg-[var(--modal-color)] rounded-3xl shadow-2xl w-full max-w-[420px] md:max-w-[500px] overflow-hidden pb-6 animate-in fade-in zoom-in duration-200 flex flex-col max-h-[90vh]">
        
        {/* Header */}
        <div className="relative flex items-center justify-center px-4 py-4 border-b border-[var(--border-color)]  dark:border-[color-mix(in_srgb,var(--border-color),white_07%)]">
          <button
            onClick={close}
            className="absolute left-4 text-[var(--text-primary)]/80 hover:text-[var(--text-primary)]  "
          >
            <X size={24} />
          </button>
          <h2 className="text-[var(--text-primary)] font-gilroy_semibold font-bold text-[17px] translate-y-0.5">
            <TextTranslate text="Tagged People" />
          </h2>
        </div>

        {/* User List Area */}
        <div className="flex-1 overflow-y-auto theme-scrollbar min-h-[300px]">
          {isLoading ? (
            <div className="flex justify-center items-center py-20">
              <span className="text-[var(--text-secondary)] font-gilroy_md text-[14px]">
                <TextTranslate text="Loading..." />
              </span>
            </div>
          ) : selectedUserDetails.length > 0 ? (
            <div className="flex flex-col">
              {selectedUserDetails.map((user) => (
                <div
                  key={user.to_user}
                  className="flex items-center justify-between px-6 py-3  hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)] group  "
                >
                  <div className="flex items-center gap-3">
                    <img
                      src={user.profile_pic || "/assets/default_user.png"}
                      className="w-12 h-12 rounded-full object-cover border border-[var(--border-color)]"
                      alt="profile"
                    />
                    <div className="flex flex-col">
                      <span className="text-[var(--text-primary)] font-gilroy_semibold font-bold text-[14px]">
                        {user.first_name} {user.last_name || ""}
                      </span>
                      <span className="text-[var(--text-secondary)] font-gilroy_md text-[13px]">
                        @{user.username}
                      </span>
                    </div>
                  </div>

                  {/* Remove Button with ref styling */}
                  <button
                    onClick={() => handleRemoveUser(user.to_user)}
                    className="px-5 py-1.5 rounded-xl cursor-pointer active:scale-95 border-[0.5px] border-[var(--text-primary)] bg-transparent text-[var(--text-primary)] group-hover:bg-[var(--text-primary)] group-hover:text-[var(--modal-color)] font-gilroy_semibold text-[13px]   "
                  >
                    <TextTranslate text="Remove" />
                  </button>
                </div>
              ))}
            </div>
          ) : (
            <div className="py-20 text-center flex flex-col items-center justify-center gap-3">
              <img 
                src="/assets/tag_vector.png" 
                className="w-16 opacity-20 brightness-0 dark:invert   " 
                alt="" 
              />
              <p className="text-[var(--text-secondary)] font-gilroy_md text-[14px]">
                <TextTranslate text="No tagged people found" />
              </p>
            </div>
          )}
        </div>

        {/* Footer Done Button */}
        <div className="px-6 mt-2 -mb-3">
          <button
            onClick={close}
            className="w-full py-2.5 bg-[#341F60] hover:bg-[#6C47B7] text-white font-gilroy_semibold font-bold rounded-xl text-[15px] active:scale-[0.98]   "
            type="button"
          >
            <TextTranslate text="Done" />
          </button>
        </div>
      </div>
    </div>
  );
}

export default TaggedPeopleList;