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

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Ferien und Feiertage – JKA-Karateclub Arbon",
  description: "Trainingsunterbrüche des JKA-Karateclub Arbon: Schulferien Kanton Thurgau und gesetzliche Feiertage.",
};

export default async function FerienFeiertage() {
  const periods = (await store.holidays.read()).sort((a, b) => a.order - b.order);

  return (
    <div className="mx-auto max-w-content px-6 py-section">
      <h1 className="font-display text-section-title leading-tight text-secondary">
        Ferien und Feiertage
      </h1>
      <p className="mt-2 font-accent text-xl italic text-gray-700">
        Trainingsunterbrüche 2025/2026
      </p>
      <BrushStroke />

      <p className="max-w-2xl text-base leading-relaxed text-gray-700">
        Das Training pausiert während den Schulferien des Kantons Thurgau sowie an gesetzlichen
        Feiertagen. Die folgende Übersicht zeigt die geplanten Trainingsunterbrüche.
      </p>

      {periods.length === 0 ? (
        <p className="mt-10 text-sm text-gray-400 italic">Aktuell keine Einträge hinterlegt.</p>
      ) : (
        <div className="mt-10 max-w-2xl overflow-x-auto">
          <table className="w-full border-collapse text-sm">
            <thead>
              <tr className="border-b-2 border-secondary">
                <th className="pb-3 pr-6 text-left font-display text-base tracking-wide text-secondary">Zeitraum</th>
                <th className="pb-3 pr-6 text-left font-display text-base tracking-wide text-secondary">Datum</th>
                <th className="pb-3 text-left font-display text-base tracking-wide text-secondary">Hinweis</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {periods.map((p) => (
                <tr key={p.id} className="group hover:bg-gray-100 transition-colors duration-fast">
                  <td className="py-4 pr-6 font-medium text-secondary">{p.label}</td>
                  <td className="py-4 pr-6 text-gray-700">{p.dates}</td>
                  <td className="py-4 text-gray-400 italic text-xs">{p.note ?? "kein Training"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <div className="mt-10 max-w-2xl rounded-lg border border-accent/30 bg-accent/10 p-5 text-sm leading-relaxed text-secondary">
        <strong>Hinweis:</strong> Für aktuelle Informationen werden Änderungen jeweils per E-Mail
        an die Mitglieder kommuniziert. Massgebend sind stets die aktuellen Schulferien des Kantons
        Thurgau gemäss{" "}
        <a href="https://dek.tg.ch/schulferien.html/5455" target="_blank" rel="noopener noreferrer" className="underline hover:text-primary">
          dek.tg.ch
        </a>
        .
      </div>
    </div>
  );
}