import type { Metadata } from "next";
import Link from "next/link";
import { Container, SectionHeading } from "@/components/ui";
import { ContentImage } from "@/components/content-image";
import { getHarvests } from "@/lib/data";
import { formatMonthYear } from "@/lib/format";
import { getLocale } from "@/i18n/locale";
import { getDictionary } from "@/i18n/get-dictionary";

export const metadata: Metadata = {
  title: "Unsere Ernten",
  description: "Alle bisherigen Wabenhain-Ernten im Überblick — jede mit eigenem Charakter.",
  alternates: { canonical: "/ernten" },
};

// Siehe Begruendung in app/page.tsx.
export const dynamic = "force-dynamic";

export default async function ErntenPage() {
  const t = getDictionary(await getLocale());
  const harvests = await getHarvests();
  const byYear = harvests.reduce<Record<number, typeof harvests>>((acc, h) => {
    acc[h.year] = [...(acc[h.year] ?? []), h];
    return acc;
  }, {});
  const years = Object.keys(byYear).map(Number).sort((a, b) => b - a);

  return (
    <div className="py-20">
      <Container>
        <SectionHeading level="h1" eyebrow={t.erntenPage.eyebrow} title={t.erntenPage.title} />

        <div className="mt-16 space-y-16">
          {years.map((year) => (
            <div key={year}>
              <h2 className="text-2xl text-forest mb-6">{year}</h2>
              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
                {byYear[year].map((harvest) => (
                  <Link
                    key={harvest.id}
                    href={`/ernten/${harvest.year}/${encodeURIComponent(harvest.type)}`}
                    className="group"
                  >
                    <ContentImage
                      src={harvest.images[0] ?? null}
                      alt={harvest.type}
                      tone="forest"
                      className="aspect-[4/3] w-full transition-transform duration-500 group-hover:scale-[1.02]"
                      label={formatMonthYear(harvest.harvestDate)}
                    />
                    <h3 className="mt-4 text-lg text-forest">{harvest.type}</h3>
                    <p className="text-sm text-ink/65">{t.erntenPage.batchCount(harvest.batches.length)}</p>
                  </Link>
                ))}
              </div>
            </div>
          ))}
          {years.length === 0 ? (
            <p className="text-ink/70">{t.erntenPage.emptyText}</p>
          ) : null}
        </div>
      </Container>
    </div>
  );
}