import { Metadata } from "next";
import { fetchPostById } from "@/api/fetchPostById";
import { buildStorageUrl } from "@/components/main/BaseUrl";
import { generatePageMetadata } from "@/utils/generatePageMetadata";
import {
  buildPostPath,
  buildPostSeoDescription,
  buildPostSeoTitle,
} from "@/lib/postSlug";
import ExploreReelClient from "./ExploreReelClient";
import { getServerLanguage } from "@/lib/i18n/server";
import { translateCommon } from "@/lib/i18n/translate";

type Props = {
  params: Promise<{ id: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id } = await params;
  const lang = await getServerLanguage();
  const post = await fetchPostById(id);
  const title = post
    ? buildPostSeoTitle(post, lang)
    : translateCommon(lang, "exploreMeta.defaultTitle");
  const description = post
    ? buildPostSeoDescription(post, lang)
    : translateCommon(lang, "exploreMeta.defaultDescription");
  const ogImage = post?.files?.[0]?.path
    ? buildStorageUrl(post.files[0].path)
    : undefined;

  return generatePageMetadata({
    title,
    description,
    path: buildPostPath(id, post ?? undefined),
    type: "article",
    imageUrl: ogImage,
    imageAlt: post?.caption?.slice(0, 80) || translateCommon(lang, "exploreMeta.defaultAlt"),
    publishedTime: post?.createdAt,
    modifiedTime: post?.updatedAt,
    lang,
  });
}

export default async function ExploreReelPage({ params }: Props) {
  const { id } = await params;
  return <ExploreReelClient id={id} />;
}
