"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 { setUserId } from "../store/Slice/SetUserIdForChatOpen";
import TextTranslate from "../utils/TextTranslate";
import { useTranslateText } from "../hooks/useTranslate";
import { setFollowedUsers, toggleFollow } from "../store/Slice/MyFollowingSlice";
import { X } from "lucide-react";

function MyFollowing({ onClose }: { onClose: () => void }) {
  const token = Cookies.get("Snapta_auth_token");
  const {
    data: FollowingData,
    error: FollowingError,
    isLoading,
    refetch,
  } = useGetMyAllFollowingQuery({ token: token || "" });
  console.log("MyFollowing 1111", FollowingData);
  const router = useRouter();
  const translate = useTranslateText();
  const dispatch = useAppDispatch();

  // Get followed users from Redux
  const followedUsers = useAppSelector((state: any) => state.followStats?.followedUsers || {});

  // Initialize followed users from FollowingData (like Discover component)
  useEffect(() => {
    if (FollowingData?.follower) {
      const followedUserIds = FollowingData.follower.reduce(
        (account: { [key: string]: boolean }, follow: any) => {
          account[follow.follow_user_id] = true;
          return account;
        },
        {} as { [key: string]: boolean }
      );
      dispatch(setFollowedUsers(followedUserIds));
    }
  }, [FollowingData, dispatch]);

  //  To handle Search user
  const [searchTerm, setSearchTerm] = useState("");
  const users: User[] = Array.isArray(FollowingData?.follower)
    ? FollowingData?.follower
    : [];
  const filteredUsers = useMemo(() => {
    return users.filter(
      (user) =>
        (user?.first_name + " " + user?.last_name || "")
          .toLowerCase()
          .includes(searchTerm.toLowerCase()) ||
        user?.username?.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [users, searchTerm]);

  // To follow user
  const { postData } = useApiPost();
  const handleUnfollowUser = async (userId: string) => {
    // Use Redux action for optimistic update
    dispatch(toggleFollow(userId));

    try {
      const response = await postData("/follow", { to_user: userId });
      refetch();                      
      showSuccessToast(response?.message);
    } catch (error: any) {
      // Revert optimistic update on error
      dispatch(toggleFollow(userId));
      console.error("Error unfollowing user:", error);
    }
  };

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

  // Following Data ==============================
interface FollowingCardProps {
  user: {
    profile_pic: string;
    first_name: string;
    last_name: string;
    username: string;
    follow_user_id: string;
  };
  onUsernameClick: (user: any) => void;
  onUnfollow: (userId: string) => void;
}

  const FollowingCard: React.FC<FollowingCardProps> = ({
    user,
    onUsernameClick,
    onUnfollow,
  }) => {
    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={user.profile_pic || "/assets/default_user.png"}
            alt={"Profile Image"}
            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%)]"
          />
          <div className="flex flex-col">
          <button onClick={() => onUsernameClick(user)} className="text-left">
  <p className="text-[var(--text-primary)] font-gilroy_semibold font-bold text-[15px]">
    {user.first_name} {user.last_name}
  </p>
  <p className="text-[var(--text-secondary)] text-[13px]">
    @{user.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 text-[#341F60] dark:text-[var(--text-primary)] bg-transparent border border-[#341F60] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]"
          onClick={(e) => {
            e.stopPropagation(); // Prevents navigation on unfollow click
            onUnfollow(user.follow_user_id);
          }}
        >
          <TextTranslate text="Following" />
        </button>
      </div>
    );
  };

  console.log("Following Data 222222", FollowingData);

  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="Following" />
          </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"
          />
          <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>
          ) : FollowingData?.follower.length > 0 ? (
            (searchTerm ? filteredUsers : users).map((user) => (
              <FollowingCard
                key={user.follow_user_id}
                user={user}
                onUsernameClick={handleUsernameClick}
                onUnfollow={handleUnfollowUser}
              />
            ))
          ) : (
            <div className="flex flex-col items-center justify-center py-20 text-center">
              <Image
                src={NoPostGif}
                alt="No posts available"
                className="w-16 h-16 opacity-20 img-theme"
              />
              <span className="mt-4 text-[var(--text-secondary)] text-[14px]">
                <TextTranslate text="You are not following anyone yet" />
              </span>
            </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"
          >
            <TextTranslate text="Done" />
          </button>
        </div>
      </div>
    </div>
  );
}

export default MyFollowing;