"use client";
import React, { useEffect } from "react";
import Cookies from "js-cookie";
import { useGetMyAllReelsQuery } from "../../store/api/GetMyAllReels";
import { useAppDispatch, useAppSelector } from "../../hooks/hooks";
import { setFirstReelThumbnail } from "../../store/Slice/SecondUserFirstReelThumbnail";
import SecondUserAllReels from "./SecondUserReels";
import MyAllReels from "./MyReels";

function Reels() {
  const token = Cookies.get("Snapta_auth_token");
  // Change: Use viewedUser slice to determine which component to show
  const viewedUserId = useAppSelector((state) => state.viewedUser.viewedUserId);
  const isOwnProfile = useAppSelector((state) => state.viewedUser.isOwnProfile);
  const dispatch = useAppDispatch();

  // Fetch My Reels via RTK Query
  const { data: MyReelsData } = useGetMyAllReelsQuery({ token: token || "" });

  // Update Reel Count Cookie and Redux State for thumbnails
  useEffect(() => {
    // Change: Logic now depends on isOwnProfile flag
    if (isOwnProfile && MyReelsData?.reels) {
      // Set total count for current user
      Cookies.set("reel_count", String(MyReelsData.reels.length || "0"));
      
      // Handle thumbnail dispatch for first reel
      const firstThumbnail = MyReelsData.reels[0]?.video?.find(
        (vid) => vid.reel_video_thumbnail
      )?.reel_video_thumbnail;

      if (firstThumbnail) {
        dispatch(setFirstReelThumbnail(firstThumbnail));
      }
    }
  }, [isOwnProfile, MyReelsData, dispatch]);

  return (
    <div className="w-full flex justify-center">
      {/* Change: Render based on isOwnProfile flag */}
      {isOwnProfile ? (
        <MyAllReels />
      ) : (
        <SecondUserAllReels />
      )}
    </div>
  );
}

export default Reels;