"use client";
import React, { useEffect, useState, useMemo } from "react";
import Cookies from "js-cookie";
import { useGetMyAllFollowingQuery } from "../store/api/GetMyFollowing";
import useApiPost from "../hooks/postData";
import { useRouter } from "next/navigation";
import Image from "next/image";
import NoPostGif from "../../../public/assets/NoPost.png";
import { User } from "../types/SearchUserType";
import { ClipLoader } from "react-spinners";
import { useAppDispatch, useAppSelector } from "../hooks/hooks";
import { setNewUser } from "../store/Slice/NewUserChatSlice";
import TextTranslate from "../utils/TextTranslate";
import { useTranslateText } from "../hooks/useTranslate";
import { incrementFollowing } from "../store/Slice/MyFollowingSlice";
import { X } from "lucide-react";
import { showSuccessToast } from "../components/Toast/SuccessToast";
import { showErrorToast } from "../components/Toast/ErrorToast";

function MyFollowers({ onClose }: { onClose: () => void }) {
  const userId = useAppSelector((state) => state.userid.userId);
  const token = Cookies.get("Snapta_auth_token");
  const [isLoading, setIsLoading] = useState(false);
  const { data, loading, postData } = useApiPost();
  const [followerList, setFollowerList] = useState<User[]>([]);
  const dispatch = useAppDispatch();
  const router = useRouter();

  const { data: FollowingData, refetch: refetchFollowing } =
    useGetMyAllFollowingQuery({ token: token || "" });
  const translate = useTranslateText();

  // State to track which users are followed
  const [followedUsers, setFollowedUsers] = useState<Set<string>>(new Set());

  useEffect(() => {
    if (FollowingData?.follower) {
      const followedSet = new Set(
        FollowingData.follower.map((user: any) => String(user.follow_user_id))
      );
      setFollowedUsers(followedSet);
    }
  }, [FollowingData]);

  useEffect(() => {
    const handleFollowers = async () => {
      setIsLoading(true);
      try {
        const res = await postData("/second_user_followers", {
          to_user_id: userId,
        });
        setFollowerList(res?.follower || []);
      } catch (error: any) {
        showErrorToast(error?.message || "Failed to load followers");
      } finally {
        setIsLoading(false);
      }
    };

    if (userId) {
      handleFollowers();
    }
  }, [userId]);

  // Handle follow back
  const handleFollowBack = async (followUserId: string) => {
    const stringId = String(followUserId);
    
    // Optimistically update UI
    setFollowedUsers((prev) => new Set(prev).add(stringId));

    try {
      const response = await postData("/follow", { to_user: stringId });

      if (response) {
        await refetchFollowing();
        dispatch(incrementFollowing());
        showSuccessToast(response?.message || "Followed successfully");
      } else {
        // Rollback if follow failed
        setFollowedUsers((prev) => {
          const newSet = new Set(prev);
          newSet.delete(stringId);
          return newSet;
        });
        showErrorToast("Failed to follow back", "Something went wrong.");
      }
    } catch (error: any) {
      // Rollback on error
      setFollowedUsers((prev) => {
        const newSet = new Set(prev);
        newSet.delete(stringId);
        return newSet;
      });
      showErrorToast(error?.message || "Failed to follow back", "Something went wrong.");
    }
  };

  // Handle message open
  const handleMessageOpen = (user: any) => {
    dispatch(
      setNewUser({
        id: user.follow_user_id,
        first_name: user.first_name,
        profile_pic: user.profile_pic,
        second_id: ""
      })
    );

    localStorage.setItem(
      "snapta_new_user",
      JSON.stringify({
        id: user.follow_user_id,
        first_name: user.first_name,
        profile_pic: user.profile_pic,
      })
    );

    router.push("/Message");
    onClose();
  };

  // Handle username click to open profile
  const handleUsernameClick = (user: any) => {
    if (!user?.username) {
      console.error("Username missing:", user);
      return;
    }
    router.push(`/Profile/${user.username}`);
    onClose();
  };

  const [searchTerm, setSearchTerm] = useState("");
  const filteredUsers = useMemo(() => {
    return followerList.filter(
      (user: User) =>
        (user.first_name + " " + user.last_name)
          .toLowerCase()
          .includes(searchTerm.toLowerCase()) ||
        user.username.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [followerList, searchTerm]);

  // Follower Card Component
  const FollowerCard = ({
    follower,
    isFollowing,
    onFollowClick,
    onUsernameClick,
    onMessageClick,
  }: {
    follower: any;
    isFollowing: boolean;
    onFollowClick: (id: string) => void;
    onUsernameClick: (user: any) => void;
    onMessageClick: (user: any) => void;
  }) => {
    return (
      <div className="flex items-center justify-between px-4 sm:px-6 py-3 hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)]">
        <div className="flex items-center gap-3">
          <img
            src={follower.profile_pic || "/assets/default_user.png"}
            alt="Profile"
            className="w-12 h-12 rounded-full object-cover border border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]"
            onError={(e) => {
              (e.target as HTMLImageElement).src = "/assets/default_user.png";
            }}
          />
          <div className="flex flex-col">
            <button onClick={() => onUsernameClick(follower)} className="text-left">
              <p className="text-[var(--text-primary)] font-gilroy_semibold font-bold text-[15px] hover:underline">
                {follower.first_name} {follower.last_name}
              </p>
              <p className="text-[var(--text-secondary)] text-[13px]">
                @{follower.username}
              </p>
            </button>
          </div>
        </div>

        <button
          className={`rounded-xl font-gilroy_semibold text-[12px] h-fit w-[80px] py-1.5 transition-all duration-300 active:scale-95 ${
            isFollowing
              ? "text-[#341F60] dark:text-[var(--text-primary)] bg-transparent border border-[#341F60] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)]"
              : "bg-gradient-custom text-white border border-transparent hover:opacity-90"
          }`}
          onClick={() => {
            if (isFollowing) {
              onMessageClick(follower);
            } else {
              onFollowClick(follower.follow_user_id);
            }
          }}
        >
          {isFollowing ? <TextTranslate text="Message" /> : <TextTranslate text="Follow Back" />}
        </button>
      </div>
    );
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-[200] p-4">
      <div className="bg-[var(--modal-color)] rounded-3xl shadow-2xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden pb-6 animate-in fade-in zoom-in duration-200">
        
        {/* Header */}
        <div className="relative flex items-center justify-center px-4 py-4 border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]">
          <button
            onClick={onClose}
            className="absolute left-6 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]">
            <TextTranslate text="Followers" />
          </h2>
        </div>

        {/* Search */}
        <div className="flex items-center px-4 sm:px-6 py-2 mb-2 border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]">
          <img
            src="/assets/follower_search.png"
            className="w-4 h-4 mr-3 opacity-50 img-theme"
            alt="search"
          />
          <input
            type="text"
            placeholder={translate("Search Here")}
            className="bg-transparent outline-none text-[var(--text-primary)] text-[14px] w-full py-1 placeholder:text-[var(--text-primary)]/30"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        {/* List */}
        <div className="max-h-[400px] overflow-y-auto theme-scrollbar">
          {isLoading ? (
            <div className="flex justify-center py-10 text-sm text-[var(--text-secondary)]">
              <ClipLoader color="#452B7A" size={25} />
            </div>
          ) : (
            <>
              {followerList.length > 0 ? (
                <>
                  {(searchTerm ? filteredUsers : followerList).map((user: User) => (
                    <FollowerCard
                      key={user.follow_user_id}
                      follower={user}
                      isFollowing={followedUsers.has(String(user.follow_user_id))}
                      onFollowClick={handleFollowBack}
                      onUsernameClick={handleUsernameClick}
                      onMessageClick={handleMessageOpen}
                    />
                  ))}
                </>
              ) : (
                <div className="flex flex-col items-center justify-center py-20 text-center">
                  <Image
                    src={NoPostGif}
                    alt="No followers"
                    className="w-16 h-16 opacity-20 img-theme"
                  />
                  <p className="mt-4 text-[var(--text-secondary)] text-[14px]">
                    <TextTranslate text="No followers found" />
                  </p>
                </div>
              )}
            </>
          )}
        </div>

        {/* Footer */}
        <div className="px-4 sm:px-6 mt-4 -mb-3">
          <button
            onClick={onClose}
            className="w-full py-2.5 bg-[#341F60] text-white rounded-xl font-bold hover:opacity-90 transition-all duration-300"
          >
            <TextTranslate text="Done" />
          </button>
        </div>
      </div>
    </div>
  );
}

export default MyFollowers;