"use client";
import { useEffect, useState, useCallback } from "react";
import { useParams, useRouter } from "next/navigation";
import PostDetail from "../../Explore/Post_Detail";
import { useGetAllPostReelsQuery } from "../../store/api/GetAllPostReel";
import Cookies from "js-cookie";

export default function PostPage() {
  const params = useParams();
  const router = useRouter();
  const postId = params.id as string;
  const token = Cookies.get("Snapta_auth_token");
  const [isOpen, setIsOpen] = useState(false);
  const [postImages, setPostImages] = useState<string[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [redirectUrl, setRedirectUrl] = useState<string>("/Home");

  const { data: allData } = useGetAllPostReelsQuery({
    token: token || "",
  });

  const handleClose = useCallback(() => {
    console.log('DEBUG PostPage - handleClose called, redirectUrl:', redirectUrl);
    setIsOpen(false);
    // Redirect back to the original page
    if (redirectUrl) {
      router.push(redirectUrl);
    } else {
      // Fallback to Home if no redirectUrl
      router.push("/Home");
    }
    // Clear the saved redirect URL
    localStorage.removeItem("modalRedirectUrl");
  }, [router, redirectUrl]);

  useEffect(() => {
    // Check if user is authenticated
    if (!token) {
      router.push("/SignIn");
      return;
    }

    // Get the redirect URL from our modal-specific localStorage or default to Home
    let savedRedirectUrl = localStorage.getItem("modalRedirectUrl");
    
    // If no saved URL and this is a direct link (no referrer or external referrer), set a better default
    if (!savedRedirectUrl && (!document.referrer || !document.referrer.includes(window.location.origin))) {
      // For direct links, check if we can determine the previous page from browser history
      // Default to Explore since that's where posts are typically viewed
      savedRedirectUrl = "/Explore";
    } else if (!savedRedirectUrl) {
      savedRedirectUrl = "/Home";
    }
    
    setRedirectUrl(savedRedirectUrl);
    
    if (!postId) {
      router.push(savedRedirectUrl);
      return;
    }

    // Find the post in allData
    const post = allData?.recent_content?.find(
      (post) => Number(post.post_id) === Number(postId)
    );

    if (post) {
      const allImages = post?.post_image?.map((img: any) => img.url).filter(Boolean) || [];
      setPostImages(allImages);
      setIsOpen(true);
      setIsLoading(false);
    } else {
      // Post not found, redirect to original page
      router.push(savedRedirectUrl);
    }
  }, [postId, allData, router, token]);

  // Handle escape key to close modal
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen) {
        handleClose();
      }
    };

    if (isOpen) {
      window.addEventListener('keydown', handleEscape);
      return () => window.removeEventListener('keydown', handleEscape);
    }
  }, [isOpen, redirectUrl, handleClose]);

  // Also close when clicking outside the modal
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (e.target === e.currentTarget && isOpen) {
        handleClose();
      }
    };

    if (isOpen) {
      document.addEventListener('click', handleClickOutside);
      return () => document.removeEventListener('click', handleClickOutside);
    }
  }, [isOpen, handleClose]);

  if (isLoading) {
    return (
      <div className="min-h-screen bg-[var(--bg-primary)] flex items-center justify-center">
        <div className="text-[var(--text-primary)]">Loading...</div>
      </div>
    );
  }

  if (!isOpen) {
    return null;
  }

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <PostDetail
        images={postImages}
        postId={postId}
        onClose={handleClose}
      />
    </div>
  );
}