import Link from "next/link";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { AnimatedSection } from "@/components/animated-section";
import { SiteFooter } from "@/components/site-footer";
import {
  getReadingSpreadsSettings,
  SPREAD_START_BUTTON_LABEL,
} from "@/lib/reading-spreads";
import { getReadingSettings } from "@/lib/readings/settings";
import { createPageMetadata } from "@/lib/seo/metadata";

function formatReadingPrice(amount: number): string {
  return `${amount.toLocaleString("fa-IR")} ریال`;
}

export async function generateMetadata() {
  const { pageTitle, pageDescription } = await getReadingSpreadsSettings();
  return createPageMetadata({
    title: pageTitle,
    description: pageDescription,
    path: "/reading",
  });
}

export default async function ReadingSpreadPage() {
  const [{ pageTitle, pageDescription, spreads }, { prices }] = await Promise.all([
    getReadingSpreadsSettings(),
    getReadingSettings(),
  ]);

  return (
    <div className="flex flex-1 flex-col">
      <div className="container mx-auto flex min-h-[calc(100svh-2rem)] flex-1 flex-col px-4 pt-12 pb-56 md:pb-72">
      <AnimatedSection>
        <div className="max-w-2xl mx-auto text-center mb-12">
          <h1 className="text-3xl font-bold mb-2 text-amber-50 drop-shadow-[0_2px_12px_rgba(0,0,0,0.45)]">
            {pageTitle}
          </h1>
          <p className="text-white/90">{pageDescription}</p>
        </div>
      </AnimatedSection>
      <AnimatedSection delay={0.15}>
      <div className="grid gap-6 md:grid-cols-3 max-w-4xl mx-auto">
        {spreads.map((s) => (
          <Card
            key={s.type}
            className="flex flex-col border-amber-400/30 bg-[#1a0f2e]/80 text-amber-50 shadow-[0_8px_40px_rgba(0,0,0,0.35)] backdrop-blur-md"
          >
            <CardHeader className="text-center pb-2">
              <CardTitle className="text-lg leading-snug text-amber-50">{s.label}</CardTitle>
              <CardDescription className="text-base text-amber-200/85">{s.subtitle}</CardDescription>
            </CardHeader>
            <CardContent className="flex-1 flex flex-col gap-6">
              <ul className="space-y-2.5 text-sm text-amber-100/85 text-start">
                {s.features.map((feature) => (
                  <li key={feature} className="flex items-start gap-2 leading-relaxed">
                    <span className="shrink-0 text-amber-300" aria-hidden>
                      ✓
                    </span>
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
              <p className="text-center text-lg font-bold text-amber-300">
                {formatReadingPrice(prices[s.type])}
              </p>
              <Button asChild className="w-full">
                <Link href={`/reading/form?spread=${s.type}`}>
                  {SPREAD_START_BUTTON_LABEL[s.type]}
                </Link>
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
      </AnimatedSection>
      <AnimatedSection delay={0.25}>
        <div className="mt-auto pt-16 text-center md:pt-24">
          <Button
            variant="outline"
            asChild
            className="border-amber-400/45 bg-black/25 text-amber-50 hover:bg-white/10 hover:text-white"
          >
            <Link href="/">بازگشت به صفحه اصلی</Link>
          </Button>
        </div>
      </AnimatedSection>
      </div>
      <SiteFooter />
    </div>
  );
}