"use client";
import React, { useRef, useState, useCallback, useEffect } from "react";
import Image from "next/image";
import useApiPost from "@/app/hooks/postData";
import { Reels } from "@/app/types/AllReel";
import NoPostGif from "../../../../public/assets/NoPost.png";
import ShimmerPost from "../Post/ShimmerPost";
import ReelDetail from "@/app/Explore/Reel_Comment";
import { useAppSelector } from "@/app/hooks/hooks";
import TextTranslate from "@/app/utils/TextTranslate";

function SecondUserAllReels() {
  const { postData } = useApiPost();
  const [pageNo, setPageNo] = useState(1);
  const [AllPosts, setAllPosts] = useState<Reels[]>([]);
  const [hasMore, setHasMore] = useState(true);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [isInitialLoading, setIsInitialLoading] = useState(true);
  const hasFetchedPageOneRef = useRef(false);
  
  // Change: Pull the target ID from the viewedUser slice
  const targetUserId = useAppSelector((state) => state.viewedUser.viewedUserId);

  useEffect(() => {
    // Change: Ensure we have a target ID before fetching
    if (!targetUserId) return;

    const fetchPosts = async () => {
      if (!hasMore || (isLoadingMore && pageNo !== 1)) return;

      if (pageNo === 1) {
        if (hasFetchedPageOneRef.current) return;
        hasFetchedPageOneRef.current = true;
      }

      try {
        setIsLoadingMore(true);

        const response = await postData("/second_user_all_reel_pagination", {
          to_user_id: targetUserId, // Change: Use targetUserId
          page_no: pageNo,
        });

        const newPosts: Reels[] = response?.reels || [];

        setAllPosts((prevPosts) => (pageNo === 1 ? newPosts : [...prevPosts, ...newPosts]));
        setHasMore(newPosts.length > 0);
      } catch (error) {
        console.error("Error fetching paginated posts:", error);
      } finally {
        setIsLoadingMore(false);
        if (pageNo === 1) setIsInitialLoading(false);
      }
    };

    fetchPosts();
  }, [pageNo, targetUserId]); // Change: Depend on targetUserId

  // Reset logic for new user selection
  useEffect(() => {
    setPageNo(1);
    setAllPosts([]);
    setHasMore(true);
    setIsInitialLoading(true);
    hasFetchedPageOneRef.current = false;
  }, [targetUserId]); // Change: Reset when targetUserId changes

  const observer = useRef<IntersectionObserver | null>(null);
  const lastPostRef = useCallback(
    (node: HTMLDivElement | null) => {
      if (isLoadingMore) return;
      if (observer.current) observer.current.disconnect();

      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          setPageNo((prevPageNo) => prevPageNo + 1);
        }
      });

      if (node) observer.current.observe(node);
    },
    [isLoadingMore, hasMore]
  );

  const [selectedVideo, setSelectedVideo] = useState<{
    postId: string;
    url: string;
  } | null>(null);

  const handleVideoClick = (postId: string, url: string) => {
    setSelectedVideo({ postId, url });
  };

  return (
    <>
      <div className="w-full sm:w-[1050px] mx-auto min-h-screen">
        <div className="flex flex-col items-center w-full">
          {isInitialLoading ? (
            <div className="w-full transition-opacity duration-300">
              <ShimmerPost />
            </div>
          ) : AllPosts.length > 0 ? (
            <div className="w-full animate-in fade-in duration-500">
              <div className="grid grid-cols-3 gap-[1px] sm:gap-1 w-full">
                {AllPosts.map((reel, index) => {
                  const isLastPost = index === AllPosts.length - 1;
                  const videoUrl = reel.video[0]?.reel_video;

                  return (
                    <div
                      key={`${reel.reel_id}-${index}`}
                      ref={isLastPost ? lastPostRef : null}
                      className="w-full aspect-[3/4] relative overflow-hidden bg-[var(--bg-secondary)]"
                    >
                      <button
                        className="w-full h-full block group relative"
                        onClick={() => handleVideoClick(reel.reel_id, videoUrl)}
                      >
                        <video
                          src={videoUrl}
                          className="w-full h-full object-cover"
                          muted
                          autoPlay
                          loop
                        />
                        
                        <Image
                          src="/assets/reel_icon.png"
                          alt="reel_icon"
                          height={28}
                          width={28}
                          className="absolute top-2 right-2 w-5 h-5 z-20"
                        />

                        <div className="flex gap-1 items-center absolute bottom-2 left-2 z-20">
                          <Image
                            src="/assets/reel_eye.png"
                            alt="reel eye"
                            height={24}
                            width={24}
                            className="w-4 h-4"
                          />
                          <p className="text-xs text-white font-gilroy_regular font-medium">
                            {reel.total_view}
                          </p>
                        </div>
                      </button>
                    </div>
                  );
                })}
              </div>

              {isLoadingMore && (
                <div className="w-full mt-2">
                  <ShimmerPost />
                </div>
              )}
            </div>
          ) : (
            <div className="flex flex-col justify-center items-center min-h-[400px] w-full">
              <Image
                src={NoPostGif}
                alt="No posts available"
                className="w-20 h-20 img-theme"
              />
              <span className="text-[var(--text-primary)] opacity-50 font-gilroy_md mt-4 ml-5">
                <TextTranslate text="No Reels Post" />
              </span>
            </div>
          )}
        </div>
      </div>

      {selectedVideo && (
        <ReelDetail
          videoSrc={selectedVideo.url}
          postId={selectedVideo.postId}
          onClose={() => setSelectedVideo(null)}
        />
      )}
    </>
  );
}

export default SecondUserAllReels;