import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { Card, CardContent } from "@/components/ui/card";
import { AnimatedSection } from "@/components/animated-section";
import { createPageMetadata } from "@/lib/seo/metadata";
import { formatFortunePeriod, fortunePublicPath } from "@/lib/fortunes";

export const metadata = createPageMetadata({
  title: "فال ماهانه",
  description: "فال ماهانه تاروت — پیش‌بینی و راهنمایی ماهانه به زبان فارسی.",
  path: "/fortune/monthly",
});

export default async function MonthlyFortuneListPage() {
  const fortunes = await prisma.periodFortune.findMany({
    where: { type: "MONTHLY", status: "PUBLISHED" },
    orderBy: [{ persianYear: "desc" }, { persianMonth: "desc" }],
    take: 24,
  });

  return (
    <div className="container mx-auto px-4 py-12 max-w-4xl">
      <AnimatedSection>
        <h1 className="text-3xl font-bold mb-2">فال ماهانه</h1>
        <p className="text-muted-foreground mb-10">
          فال‌های ماهانه منتشرشده
        </p>
        {fortunes.length === 0 ? (
          <p className="text-muted-foreground">هنوز فال ماهانه‌ای منتشر نشده است.</p>
        ) : (
          <div className="grid md:grid-cols-2 gap-4">
            {fortunes.map((fortune) => (
              <Link key={fortune.id} href={fortunePublicPath(fortune)} className="group block">
                <Card className="h-full card-hover border-primary/5 group-hover:border-primary/20">
                  <CardContent className="p-5">
                    <p className="text-xs text-primary font-medium mb-2">
                      {formatFortunePeriod(fortune)}
                    </p>
                    <h2 className="font-semibold text-foreground group-hover:text-primary transition-colors">
                      {fortune.titleFa}
                    </h2>
                    <p className="text-sm text-muted-foreground line-clamp-2 mt-2 leading-relaxed">
                      {fortune.excerptFa}
                    </p>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        )}
        <p className="mt-8">
          <Link href="/fortune/daily" className="text-primary hover:underline underline-offset-4">
            فال روزانه
          </Link>
        </p>
      </AnimatedSection>
    </div>
  );
}