"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 { IoChevronBackOutline } from "react-icons/io5";
import { useRouter } from "next/navigation";
import { clearNewUser } from "../store/Slice/NewUserChatSlice";
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";
import { useGetUserProfileDetailsQuery } from "../store/api/GetUserProfileDetails";
import { showModal } from "../store/Slice/modalSlice";
import { LuSquarePen } from "react-icons/lu";
import { socketInstance } from "../utils/socket";

function AllUserChatList({ isMobile }: { isMobile: boolean }) {
  const UserListArray = useAppSelector((state) => state.chatUser.chatlist);
  const [page, setPage] = useState(1);
  const [allUsers, setAllUsers] = useState<any[]>([]);
  const [loadingMore, setLoadingMore] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  console.log("UserListArray @3543", UserListArray);

  const token = Cookies.get("Snapta_auth_token");
  const { data: UserData } = useGetUserProfileDetailsQuery({ token: token || "" });
  const currentUser = UserData?.user_data;

  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;
    const usersList = fromRedux ? UserListArray : UserChatListData?.chat_list || [];
    
    // Sort users by last message time (most recent first)
    return [...usersList].sort((a, b) => {
      const timeA = new Date(a.last_message_created || a.time || 0).getTime();
      const timeB = new Date(b.last_message_created || b.time || 0).getTime();
      return timeB - timeA;
    });
  }, [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());
    } 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();
    }, 5000);

    return () => clearInterval(interval);
  }, [OnlineUserListRefetch]);

  // Listen for new messages and update the user list order
  useEffect(() => {
    const socket = socketInstance();
    
    const handleNewMessage = (newMessage: any) => {
      const myUserId = Cookies.get("USERID");
      
      // Check if the message is from someone else
      if (newMessage?.from_user?.toString() !== myUserId) {
        // Refetch the chat list to get updated order
        refetch();
      }
    };
    
    socket.on("message", handleNewMessage);
    
    return () => {
      socket.off("message", handleNewMessage);
    };
  }, [refetch]);

  return (
    <div className="flex flex-col h-full bg-[var(--bg-primary)] border-r border-[var(--border-color)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]">
      {/* Header */}
      <div className="flex justify-between items-center w-full gap-2 mt-1 sm:p-3 px-2 py-1 flex-shrink-0 sm:-mb-5">
        <div className="flex items-center gap-2 truncate">
          <button onClick={() => router.push("/Home")} className="sm:hidden translate-y-2 text-[var(--text-primary)]">
            <IoChevronBackOutline />
          </button>
          <h2 className="font-gilroy_semibold text-[20px] pb-1 pt-4 text-[var(--text-primary)] font-semibold truncate px-1">
            {currentUser?.username || "Username"}
          </h2>
        </div>

        {/* The Icon Button */}
        <button
          onClick={() => dispatch(showModal("ChatPopup"))}
          className="text-[var(--text-primary)] pt-4 px-2 hover:opacity-70 transition-opacity"
        >
          <LuSquarePen size={23} />
        </button>
      </div>

      {/* Search bar - Instagram Style */}
      <div className="relative px-2 py-5 flex-shrink-0 ">

        {/* Search Icon */}
        <div className="absolute inset-y-0 left-5 flex items-center pointer-events-none">
          <Image
            src={Search}
            alt="Search"
            className="w-[16px] h-[16px] img-theme   "
          />
        </div>

        {/* Search Input */}
        <input
          type="text"
          className="bg-[var(--bg-secondary)]  rounded-full w-full py-2.5 pl-9 pr-4 text-[var(--text-primary)] text-sm placeholder:text-[#8e8e8e] focus:outline-none border-none ring-0"
          placeholder={translate("Search")}
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />

      </div>
      <h2 className="font-gilroy_semibold text-[16px] pb-1 px-4 text-[var(--text-primary)] font-semibold truncate px-3">Messages</h2>

      {/* 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-4 cursor-pointer transition-colors ${user?.second_id === selectedUser?.second_id ? "bg-[rgba(255,255,255,0.05)]" : "hover:bg-[rgba(255,255,255,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-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),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 px-4  cursor-pointer transition-colors ${user?.second_id === selectedUser?.second_id
                  ? "bg-[rgba(255,255,255,0.05)]"
                  : "hover:bg-[rgba(255,255,255,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-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),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 AllUserChatList;