import type { Metadata } from "next";
import BrushStroke from "@/components/ui/BrushStroke";
import ScrollReveal from "@/components/ui/ScrollReveal";
import { store } from "@/lib/store";
import Image from "next/image";

export const metadata: Metadata = {
  title: "News – JKA-Karateclub Arbon",
  description:
    "Aktuelle Neuigkeiten, Ankündigungen und Berichte des JKA-Karateclub Arbon — Shotokan-Karate in Arbon am Bodensee.",
};

export const dynamic = "force-dynamic";

function formatDate(iso: string): string {
  const d = new Date(iso);
  return d.toLocaleDateString("de-CH", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
}

export default function NewsPage() {
  const allNews = store.news
    .read()
    .sort((a, b) => {
      if (a.isFeatured !== b.isFeatured) return a.isFeatured ? -1 : 1;
      return b.publishedAt.localeCompare(a.publishedAt);
    });

  return (
    <div className="mx-auto max-w-content px-6 py-section">
      <h1 className="font-display text-section-title leading-tight text-secondary">
        News
      </h1>
      <p className="mt-2 font-accent text-xl italic text-gray-700">
        Neuigkeiten aus dem Dojo
      </p>
      <BrushStroke />

      {allNews.length === 0 ? (
        <div className="mt-10 max-w-2xl rounded-lg border border-gray-200 bg-cream p-8 text-center">
          <p className="text-gray-400 italic">
            Noch keine News vorhanden. Schauen Sie bald wieder vorbei.
          </p>
        </div>
      ) : (
        <div className="mt-10 max-w-3xl space-y-10">
          {allNews.map((item, i) => (
            <ScrollReveal key={item.id} delayMs={i * 60}>
              <article className="rounded-lg border border-gray-200 bg-white shadow-sm hover:shadow-md transition-shadow duration-base overflow-hidden">
                {item.imageUrl && (
                  <div className="relative h-56 w-full overflow-hidden">
                    <Image
                      src={item.imageUrl}
                      alt={item.titel}
                      fill
                      className="object-cover"
                      sizes="(max-width: 768px) 100vw, 768px"
                    />
                  </div>
                )}
                <div className="p-6">
                  <div className="mb-3 flex flex-wrap items-center gap-2">
                    {item.isFeatured && (
                      <span className="rounded bg-primary px-2.5 py-0.5 text-xs font-semibold text-cream">
                        Aktuell
                      </span>
                    )}
                    <time
                      dateTime={item.publishedAt}
                      className="text-xs text-gray-400"
                    >
                      {formatDate(item.publishedAt)}
                    </time>
                  </div>
                  <h2 className="font-display text-2xl text-secondary leading-snug mb-3">
                    {item.titel}
                  </h2>
                  <p className="text-base leading-relaxed text-gray-700 whitespace-pre-wrap">
                    {item.inhalt}
                  </p>
                </div>
              </article>
            </ScrollReveal>
          ))}
        </div>
      )}
    </div>
  );
}