import { useEffect } from "react";
import { Navigate, useParams } from "react-router-dom";
import { MOCK_POSTS } from "../mocks/mockPosts";
import { POST_STREAM_USES_MOCK } from "../components/messageStream/hooks/usePostStream";

export function PostRedirect() {
  const { id } = useParams();
  // Real-API branch placeholder: when backend ships /api/posts/:id, fetch and
  // navigate to /category/<categorySlug>#post-<id>. For now mock lookup.
  const post = id ? MOCK_POSTS.find((p) => p.id === id) : undefined;

  useEffect(() => {
    if (post) {
      requestAnimationFrame(() => {
        document
          .getElementById(`post-${post.id}`)
          ?.scrollIntoView({ behavior: "smooth", block: "center" });
      });
    }
  }, [post]);

  if (!POST_STREAM_USES_MOCK && !post) {
    // TODO: replace with real fetch when /api/posts/:id ships.
    return <Navigate to="/browse" replace />;
  }
  if (!post) return <Navigate to="/browse" replace />;
  return (
    <Navigate to={`/category/${post.categorySlug}#post-${post.id}`} replace />
  );
}