export const dynamic = "force-dynamic";

import type { Metadata } from "next";
import Link from "next/link";
import { PageHeader } from "@/components/page-header";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { getAllMagazines, bookCodeToSlug } from "@/lib/magazines";
import { buildOgMeta } from "@/lib/og";

export function generateMetadata(): Metadata {
  return buildOgMeta({
    title: "Magazines",
    detail: "Back to Godhead & other periodicals",
    quote:
      "Back to Godhead — the magazine founded by Śrīla Prabhupāda in 1944 to present the timeless science of Kṛṣṇa consciousness.",
  });
}

export default async function MagazinesPage() {
  const magazines = await getAllMagazines();

  // Group magazines by flag
  const grouped: Record<string, typeof magazines> = {};
  for (const mag of magazines) {
    const key = mag.flag ?? "Other";
    if (!grouped[key]) grouped[key] = [];
    grouped[key].push(mag);
  }

  // Define display order for groups
  const groupOrder = ["Pre 1978", "Other"];
  const groupLabels: Record<string, string> = {
    "Pre 1978": "Pre 1978 Editions",
    Other: "Other Editions",
  };

  const sortedGroups = Object.keys(grouped).sort(
    (a, b) => groupOrder.indexOf(a) - groupOrder.indexOf(b),
  );

  // If there's only one group, don't show group headings
  const showGroupHeadings = sortedGroups.length > 1;

  return (
    <div className="min-h-screen bg-background">
      <PageHeader>
        <Link
          href="/"
          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          &larr; Home
        </Link>
        <h1 className="mt-3 text-3xl font-bold text-foreground">Magazines</h1>
        <p className="mt-1 text-muted-foreground">
          Back to Godhead and other periodicals by Śrīla Prabhupāda
        </p>
      </PageHeader>

      <main className="max-w-5xl mx-auto px-6 py-8 space-y-10">
        {sortedGroups.map((group) => (
          <div key={group}>
            {showGroupHeadings && (
              <h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-4">
                {groupLabels[group] ?? group}
              </h2>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {grouped[group].map((mag) => (
                <Link
                  key={mag.book}
                  href={`/magazines/${bookCodeToSlug(mag.book)}`}
                  className="block h-full"
                >
                  <Card className="h-full transition-all hover:shadow-md hover:ring-foreground/20">
                    <CardHeader className="pb-2">
                      <CardTitle className="text-base font-bold leading-snug">
                        {mag.title}
                      </CardTitle>
                      {mag.description && (
                        <CardDescription className="text-xs line-clamp-3">
                          {mag.description}
                        </CardDescription>
                      )}
                    </CardHeader>
                    <CardContent className="pt-0">
                      <div className="flex flex-wrap items-center gap-2 text-sm">
                        {mag.flag && (
                          <Badge variant="secondary" className="text-xs">
                            {mag.flag}
                          </Badge>
                        )}
                        {mag.year && (
                          <Badge variant="secondary" className="text-xs">
                            Since {mag.year}
                          </Badge>
                        )}
                        {mag.totalIssues > 0 && (
                          <span className="text-muted-foreground text-xs">
                            {mag.totalIssues} issues
                          </span>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          </div>
        ))}
      </main>
    </div>
  );
}