"use client";
import Image from "next/image";
import { useEffect, useMemo, useState } from "react";
import Search from "../../../public/assets/ChatSearch.png";
import { useUserChatListQuery } from "../store/api/UserChatList";
import Cookies from "js-cookie";
import { useAppDispatch } from "../hooks/hooks";
import { setSelectedUser, updateSelectedUser } from "../store/Slice/chatSlice";
import { useAppSelector } from "../hooks/hooks";
import { IoArrowBackOutline } from "react-icons/io5";
import { useRouter } from "next/navigation";
import { clearNewUser } from "../store/Slice/NewUserChatSlice"; // <-- import it
import formatMessageTime from "./TimeFormat";
import { useGetAllOnlineUserQuery } from "../store/api/OnlineUserList";
import formatTimeAgo from "../components/FormatDateTime";
import { useTranslateText } from "../hooks/useTranslate";
import TextTranslate from "../utils/TextTranslate";

function AllUserChatListR({ isMobile }: { isMobile: boolean }) {
  // after new msg sent show this list
  const UserListArray = useAppSelector((state) => state.chatUser.chatlist);
  console.log("UserListArray @3543", UserListArray);

  const token = Cookies.get("Snapta_auth_token");
  const { data: UserChatListData, refetch } = useUserChatListQuery({
    token: token || "",
  });
  const translate = useTranslateText();

  console.log("UserChatList @@324", UserChatListData);

  // Choose chat list data: Redux updated list OR fallback to API data
  const Users = useMemo(() => {
    const fromRedux = Array.isArray(UserListArray) && UserListArray.length > 0;
    return fromRedux ? UserListArray : UserChatListData?.chat_list || [];
  }, [UserListArray, UserChatListData?.chat_list]);
  console.log("User @@323", Users);

  const UserChatList = UserChatListData?.chat_list;
  console.log("User Chat List !!!!", UserChatList);

  const [readUsers, setReadUsers] = useState<{ [key: string]: boolean }>({});

  const handleSelectUser = (user: any) => {
    dispatch(setSelectedUser(user));
    setReadUsers((prev) => ({ ...prev, [user.second_id]: true }));
  };

  const dispatch = useAppDispatch();

  // To search for a user
  const [searchTerm, setSearchTerm] = useState("");
  const users = Array.isArray(UserChatListData?.chat_list)
    ? UserChatListData?.chat_list
    : [];
  const filteredUsers = useMemo(() => {
    return users.filter((user) =>
      (user?.first_name || "").toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [users, searchTerm]);

  console.log("Search 123", searchTerm);

  useEffect(() => {
    refetch();
  }, []);

  const selectedUser = useAppSelector((state) => state.chat.selectedUser);
  console.log("SelectedUser 123@@#", selectedUser);

  const newUserId = useAppSelector((state) => state.newUserId.newUser);
  console.log("selected User :", newUserId);
  const newUser = useAppSelector((state) => state.newUserId.newUser);

  // if newUser and not selectedUser set byDefault selectedUser as 1st user
  useEffect(() => {
   if (newUser) {
      const exists = Array.isArray(UserChatListData?.chat_list) && UserChatListData?.chat_list?.some(
        (u) => u.second_id === newUser.id
      );

      const fullUser = Array.isArray(UserChatListData?.chat_list) && UserChatListData?.chat_list?.find(
        (u) => u.second_id === newUser.id
      );


      if (fullUser) {
        dispatch(setSelectedUser(fullUser));
      } else {
        dispatch(
          setSelectedUser({
              second_id: newUser.id,
              first_name: newUser.first_name || "",
              profile_pic: newUser.profile_pic || "",
              last_name: "",
              username: "",
              id: "",
              user_id: "",
              my_id: "",
              last_seen: "",
              message: "",
              message_type: "",
              type: "",
              time: "",
              date: "",
              unread_message: "",
              role: "",
              url: ""
          })
        );
      }

      dispatch(clearNewUser()); // ✅ Clear newUser so it doesn't override again
    }else if (
      !selectedUser &&
      !isMobile &&
      (UserChatListData?.chat_list?.length ?? 0) > 0
    ) {
      dispatch(setSelectedUser(UserChatListData.chat_list[0]));
    }
  }, [
    newUser?.id,
    UserChatListData?.chat_list?.length,
    selectedUser?.second_id,
    dispatch,
    isMobile,
  ]);

  console.log("New User @@122", selectedUser);
  const router = useRouter();
  const {
    data: OnlineUserList,
    refetch: OnlineUserListRefetch,
    isLoading,
  } = useGetAllOnlineUserQuery({ token: token || "" });
  const OnlineUsers = OnlineUserList?.online_user;

  useEffect(() => {
    const interval = setInterval(() => {
      OnlineUserListRefetch(); // refetch every 5 seconds
    }, 5000);

    return () => clearInterval(interval); // cleanup on unmount
  }, [OnlineUserListRefetch]);

  return (
    <div className="flex flex-col h-full  ">
      {/* Header */}
      <div className="flex gap-2 sm:p-3 px-3 py-1 flex-shrink-0 sm:-mb-5 ">
        <button onClick={() => router.push("/Home")} className="sm:hidden text-[var(--text-primary)] ">
          <IoArrowBackOutline />
        </button>
        <h2 className="font-gilroy_semibold text-lg text-[var(--text-primary)]  font-medium">
          <TextTranslate text="Chats" />
        </h2>
      </div>

      {/* Search bar */}
      <div className="relative sm:p-3 px-2 flex-shrink-0  -mb-2">
        <div className="absolute top-1/2 left-5 transform -translate-y-1/2 p-2 flex items-center  pointer-events-none">
          <Image src={Search} alt="Search" className="w-[18px] h-[18px] invert opacity-60" />
        </div>
        <input
          type="text"
          className=" bg-transparent rounded-lg border border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_15%)] w-full py-1.5 my-1 pl-11 text-[var(--text-primary)]  placeholder:text-sm placeholder:text-[var(--text-secondary)]  focus:outline-none focus:ring-1  focus:ring-[var(--border-color)] ring-1 ring-[var(--border-color)]"
          placeholder={translate("Search for a User")}
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>

      {/* Scrollable user list */}
      {Users.length > 0 ? (
        <div className="flex-1 overflow-y-auto scrollbar-none [&::-webkit-scrollbar]:hidden">
          {searchTerm ? (
            filteredUsers.length > 0 ? (
              filteredUsers.map((user) => (
                <div
                  key={user.id}
                  className={`flex xl:gap-4 lg:gap-2 gap-4 md:gap-0 py-4 md:px-3 border-b border-[var(--border-colordark)] cursor-pointer transition-colors ${
                    user?.second_id === selectedUser?.second_id ? "bg-white/[0.05]" : "hover:bg-white/[0.02]"
                  }`}
                  onClick={() => handleSelectUser(user)}
                >
                  <div className="flex-shrink-0 px-4 lg:px-0">
                    <img
                      src={user?.profile_pic}
                      alt="profile"
                      className="w-[44px] h-[45px] rounded-full object-cover border border-white/10"
                    />
                    
                  </div>
                  <div className="flex flex-col flex-grow overflow-hidden justify-center">
                    <div className="flex justify-between items-center w-full">
                      <h2 className="lg:text-sm text-xs font-semibold text-[var(--text-primary)]  font-gilroy_semibold truncate">
                        {user?.first_name}
                      </h2>
                      <p className="text-[10px] font-poppins text-[var(--text-secondary)]">
                        {formatMessageTime(user?.last_message_created)}
                      </p>
                    </div>
                    <div className="flex justify-between items-center w-full">
                      <p className="text-[var(--text-secondary)] text-xs font-gilroy_md line-clamp-1 truncate">
                        {user?.message === "" ? user?.type : user?.message}
                      </p>
                      {user.unread_message > "0" &&
                        !readUsers[user.second_id] &&
                        user?.second_id !== selectedUser?.second_id && (
                          <div className="bg-[#8C5EE7] text-[var(--text-primary)]  rounded-full text-[10px] px-1.5 min-w-[18px] h-[18px] flex items-center justify-center font-bold">
                            {user.unread_message}
                          </div>
                        )}
                    </div>
                  </div>
                </div>
              ))
            ) : (
              <div className="flex items-center justify-center py-10">
                <p className="text-sm font-gilroy_regular text-[var(--text-secondary)]">
                  <TextTranslate text="No users found" />
                </p>
              </div>
            )
          ) : (
            Users?.map((user) => (
              <div
                key={user.id}
                className={`flex xl:gap-4 lg:gap-2 md:gap-0 gap-4 py-4 border-b px-3 border-[var(--border-colordark)] cursor-pointer transition-colors ${
                  user?.second_id === selectedUser?.second_id
                    ? "bg-white/[0.05]"
                    : "hover:bg-white/[0.02]"
                }`}
                onClick={() => handleSelectUser(user)}
              >
                <div className="relative flex-shrink-0 md:px-3 lg:px-0">
                  <img
                    src={user?.profile_pic}
                    alt="profile"
                    className="w-[44px] h-[45px] rounded-full object-cover border border-white/10"
                  />
                  {OnlineUsers?.some(
                    (onlineUser) => onlineUser.user_id === Number(user?.user_id)
                  ) && (
                    <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500  rounded-full" />
                  )}
                </div>
                <div className="flex flex-col flex-grow overflow-hidden justify-center">
                  <div className="flex justify-between items-center w-full">
                    <h2 className="lg:text-sm text-xs font-semibold text-[var(--text-primary)]  font-gilroy_semibold truncate">
                      {user?.first_name}
                    </h2>
                    <p className="text-[10px] font-poppins text-[var(--text-secondary)]">
                      {formatMessageTime(user?.last_message_created)}
                    </p>
                  </div>
                  <div className="flex justify-between items-center w-full">
                    <p className="text-[var(--text-secondary)] text-xs font-gilroy_md line-clamp-1 truncate">
                      {user?.message === "" ? user?.type : user?.message}
                    </p>
                    {user.unread_message > "0" &&
                      !readUsers[user.second_id] &&
                      user?.second_id !== selectedUser?.second_id && (
                        <div className="bg-[#8C5EE7] text-[var(--text-primary)]  rounded-full text-[10px] px-1.5 min-w-[18px] h-[18px] flex items-center justify-center font-bold">
                          {user.unread_message}
                        </div>
                      )}
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
      ) : null}
    </div>
  );
}

export default AllUserChatListR;