import { notFound } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { AnimatedSection } from "@/components/animated-section";
import { SetBreadcrumbLabels } from "@/components/breadcrumb-context";
import { createPageMetadata } from "@/lib/seo/metadata";
import { isStoredUploadUrl } from "@/lib/uploads/url";
import { formatFortunePeriod } from "@/lib/fortunes";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug: rawSlug } = await params;
  const slug = decodeURIComponent(rawSlug);
  const fortune = await prisma.periodFortune.findFirst({
    where: { slug, type: "MONTHLY", status: "PUBLISHED" },
    select: { titleFa: true, excerptFa: true, coverImageUrl: true, publishedAt: true, updatedAt: true },
  });
  if (!fortune) return {};
  return createPageMetadata({
    title: fortune.titleFa,
    description: fortune.excerptFa,
    path: `/fortune/monthly/${slug}`,
    image: fortune.coverImageUrl,
    type: "article",
    publishedTime: fortune.publishedAt?.toISOString(),
    modifiedTime: fortune.updatedAt.toISOString(),
  });
}

export default async function MonthlyFortunePage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug: rawSlug } = await params;
  const slug = decodeURIComponent(rawSlug);
  const fortune = await prisma.periodFortune.findFirst({
    where: { slug, type: "MONTHLY", status: "PUBLISHED" },
  });
  if (!fortune) notFound();

  return (
    <article className="container mx-auto px-4 py-12 max-w-3xl min-w-0 w-full overflow-x-hidden">
      <SetBreadcrumbLabels labels={{ [slug]: fortune.titleFa }} />
      <AnimatedSection>
        <p className="text-sm text-primary font-medium mb-2">فال ماهانه</p>
        <h1 className="text-3xl font-bold mb-4 break-words">{fortune.titleFa}</h1>
        <p className="text-muted-foreground mb-6 break-words">{formatFortunePeriod(fortune)}</p>
        {fortune.coverImageUrl && (
          <div className="relative aspect-video rounded-lg overflow-hidden mb-8">
            <Image
              src={fortune.coverImageUrl}
              alt=""
              fill
              className="object-cover"
              priority
              unoptimized={
                fortune.coverImageUrl.startsWith("http") || isStoredUploadUrl(fortune.coverImageUrl)
              }
            />
          </div>
        )}
        <p className="text-lg text-muted-foreground mb-8 leading-relaxed break-words">
          {fortune.excerptFa}
        </p>
        <div className="prose prose-sm max-w-none whitespace-pre-wrap break-words [overflow-wrap:anywhere] mb-8">
          {fortune.content}
        </div>
        <Link href="/fortune/monthly" className="text-primary hover:underline underline-offset-4 text-sm">
          همه فال‌های ماهانه
        </Link>
      </AnimatedSection>
    </article>
  );
}