import { notFound } from "next/navigation";
import { MovieHeader } from "@/components/MovieHeader";
import { MovieInsightPanel } from "@/components/MovieInsightPanel";
import { getMovieDetails } from "@/lib/tmdb";

export default async function MoviePage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const movieId = Number(id);

  if (!Number.isFinite(movieId) || movieId <= 0) {
    notFound();
  }

  let movie;
  try {
    movie = await getMovieDetails(movieId);
  } catch {
    notFound();
  }

  return (
    <main className="mx-auto min-h-screen w-full max-w-6xl px-6 py-10">
      <div className="space-y-10">
        <MovieHeader movie={movie} />
        <MovieInsightPanel
          movieId={movie.id}
          genres={movie.genres.map((genre) => genre.name)}
        />
      </div>

      <footer className="mt-16 border-t border-white/10 pt-6 text-center text-xs text-slate-500">
        AI-generated content for informational purposes. Verify timestamps on
        your copy.
      </footer>
    </main>
  );
}