"use client";
import React, { useEffect } from "react";
import { useAppSelector } from "../hooks/hooks";
import { useGetAllOnlineUserQuery } from "../store/api/OnlineUserList";
import Cookies from "js-cookie";
import RoundedShimmer from "../components/RoundedShimmer";
import { IoChevronBackOutline } from "react-icons/io5";
import { useAppDispatch } from "../hooks/hooks";
import { setUserId } from "../store/Slice/SetUserIdForChatOpen";
import { useRouter } from "next/navigation";
import useApiPost from "../hooks/postData";
import { showErrorToast } from "../components/Toast/ErrorToast";

interface MessageHeaderProps {
  handleBack: () => void;
}

function MessageHeader({ handleBack }: MessageHeaderProps) {
  const selectedUser = useAppSelector((state) => state.chat.selectedUser);
  const token = Cookies.get("Snapta_auth_token");
  const { postData } = useApiPost();
  
  const {
    data: OnlineUserList,
    refetch: OnlineUserListRefetch,
    isLoading,
  } = useGetAllOnlineUserQuery({ token: token || "" });
  
  const OnlineUsers = OnlineUserList?.online_user;
  const dispatch = useAppDispatch();
  const router = useRouter();

  const id = OnlineUsers?.some(
    (user) => user.user_id === Number(selectedUser?.second_id)
  );

  const handleUsernameClick = async (user: any) => {
    if (!user?.second_id) {
      console.error("User ID missing:", user);
      showErrorToast("Unable to open profile");
      return;
    }

    try {
      // Fetch user profile using the user ID from selectedUser
      const response = await postData("/second_user_profile", { 
        to_user_id: user.second_id 
      });
      
      const username = response?.user_data?.username;
      
      if (username) {
        router.push(`/Profile/${username}`);
      } else {
        console.error("Username not found for user:", user.second_id);
        showErrorToast("Unable to open profile");
      }
    } catch (error) {
      console.error("Error fetching user profile:", error);
      showErrorToast("Unable to open profile");
    }
  };

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

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

  return (
    <>
      {/* Header */}
      {selectedUser ? (
        <div className="flex justify-between sm:px-6 px-4 py-4 border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]">
          <div className="flex items-center sm:gap-4 gap-1">
            <button className="md:hidden text-xl mr-2 text-[var(--text-primary)]" onClick={handleBack}>
              <IoChevronBackOutline />
            </button>
            {isLoading ? (
              <div className="w-9 h-9">
                <RoundedShimmer />
              </div>
            ) : (
              <img
                src={selectedUser?.profile_pic}
                alt="profile"
                className="w-12 h-12 rounded-full border border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] object-cover"
              />
            )}

            <div>
              <h2
                className="font-semibold text-[var(--text-primary)] font-gilroy_medium cursor-pointer "
                onClick={() => handleUsernameClick(selectedUser)}
              >
                {selectedUser?.first_name}
              </h2>
              <p
                className={`font-gilroy_md text-xs ${
                  OnlineUsers?.some(
                    (user) => user.user_id === Number(selectedUser?.second_id)
                  )
                    ? "text-green-600"
                    : "text-[var(--text-secondary)]"
                }`}
              >
                {OnlineUsers?.some(
                  (user) => user.user_id === Number(selectedUser?.second_id)
                )
                  ? "Online"
                  : "Offline"}
              </p>
            </div>
          </div>
        </div>
      ) : (
        <></>
      )}
    </>
  );
}

export default MessageHeader;