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

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Trainer und Vorstand – Shotokan Karate Club Arbon",
  description: "Trainerteam und Vereinsführung des Shotokan Karate Club Arbon.",
};

function Initials({ name }: { name: string }) {
  const initials = name.split(" ").filter(Boolean).map((n) => n[0]).join("").slice(0, 2).toUpperCase();
  return (
    <div className="w-full h-52 bg-gray-200 rounded-lg flex items-center justify-center md:w-48">
      <span className="font-display text-4xl text-gray-400">{initials}</span>
    </div>
  );
}

export default async function TrainerVorstandPage() {
  const team = await store.team.read();
  const cheftrainer = team.trainer.filter((t) => t.isCheftrainer).sort((a, b) => a.order - b.order);
  const trainers = team.trainer.filter((t) => !t.isCheftrainer).sort((a, b) => a.order - b.order);
  const vorstand = team.vorstand.sort((a, b) => a.order - b.order);
  const mitglieder = (await store.mitglieder.read()).filter((m) => m.aktiv);

  return (
    <div className="mx-auto max-w-content px-6 py-section">
      <h1 className="font-display text-section-title leading-tight text-secondary">Trainer und Vorstand</h1>
      <p className="mt-2 font-accent text-xl italic text-gray-700">
        Erfahrung, Leidenschaft und Tradition — die Menschen hinter dem Dojo
      </p>
      <BrushStroke />

      {/* Cheftrainer */}
      {cheftrainer.map((t) => (
        <section key={t.id} className="mb-16">
          <h2 className="mb-8 font-display text-3xl text-secondary">Cheftrainer</h2>
          <div className="grid gap-10 md:grid-cols-[auto_1fr] md:items-start">
            <div className="flex flex-col gap-4">
              {t.imageUrl ? (
                <ScrollReveal>
                  <figure className="overflow-hidden rounded-lg">
                    <Image src={t.imageUrl} alt={t.name} width={640} height={480} className="w-full max-w-sm object-cover md:w-72" priority />
                  </figure>
                </ScrollReveal>
              ) : (
                <Initials name={t.name} />
              )}
            </div>
            <ScrollReveal delayMs={80}>
              <div className="space-y-4 text-base leading-relaxed text-gray-700">
                <div>
                  <h3 className="font-display text-2xl text-primary">{t.name}</h3>
                  {t.grad && <p className="mt-1 font-accent text-base italic text-gray-400">{t.grad}</p>}
                </div>
                {t.bio && <p>{t.bio}</p>}
              </div>
            </ScrollReveal>
          </div>
        </section>
      ))}

      <BrushStroke />

      {/* Trainerteam */}
      {trainers.length > 0 && (
        <section className="mb-16 mt-14">
          <h2 className="mb-8 font-display text-3xl text-secondary">Trainerteam</h2>
          <div className="grid gap-10 sm:grid-cols-2 max-w-2xl">
            {trainers.map((t, i) => (
              <ScrollReveal key={t.id} delayMs={i * 80}>
                <div className="flex flex-col gap-4">
                  {t.imageUrl ? (
                    <Image src={t.imageUrl} alt={t.name} width={320} height={208} className="w-full max-w-xs rounded-lg object-cover h-52" />
                  ) : (
                    <Initials name={t.name} />
                  )}
                  <div>
                    <h3 className="font-display text-xl text-primary">{t.name}</h3>
                    <p className="mt-0.5 font-accent text-sm italic text-gray-400">{t.rolle}</p>
                    {t.grad && <p className="mt-0.5 text-xs text-gray-400">{t.grad}</p>}
                    {t.bio && <p className="mt-2 text-sm leading-relaxed text-gray-700">{t.bio}</p>}
                    {!t.imageUrl && <p className="mt-1 text-xs text-gray-400 italic">Foto folgt</p>}
                  </div>
                </div>
              </ScrollReveal>
            ))}
          </div>
        </section>
      )}

      <BrushStroke />

      {/* Mitglieder */}
      {mitglieder.length > 0 && (
        <>
          <BrushStroke />
          <section className="mb-16 mt-14">
            <ScrollReveal>
              <h2 className="mb-8 font-display text-3xl text-secondary">Mitglieder</h2>
            </ScrollReveal>
            <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
              {mitglieder.map((m, i) => (
                <ScrollReveal key={m.id} delayMs={i * 40}>
                  <div className="flex flex-col items-center gap-3 text-center">
                    {m.imageUrl ? (
                      <Image
                        src={m.imageUrl}
                        alt={m.name}
                        width={160}
                        height={160}
                        className="h-28 w-28 rounded-full object-cover border-2 border-gray-100"
                      />
                    ) : (
                      <div className="flex h-28 w-28 items-center justify-center rounded-full bg-gray-100 border-2 border-gray-200">
                        <span className="font-display text-3xl text-gray-400">
                          {m.name.split(" ").filter(Boolean).map((n) => n[0]).join("").slice(0, 2).toUpperCase()}
                        </span>
                      </div>
                    )}
                    <div>
                      <p className="font-medium text-secondary text-sm leading-tight">{m.name}</p>
                      <p className="mt-0.5 text-xs text-gray-400 italic">{m.gürtelgrad}</p>
                    </div>
                  </div>
                </ScrollReveal>
              ))}
            </div>
          </section>
        </>
      )}

      {/* Vorstand */}
      <section className="mb-16 mt-14">
        <h2 className="mb-6 font-display text-3xl text-secondary">Vorstand</h2>
        <div className="max-w-2xl space-y-5 text-base leading-relaxed text-gray-700">
          {vorstand.length > 0 && (
            <div className="overflow-x-auto rounded-lg border border-gray-200 bg-white">
              <table className="w-full min-w-[420px] text-sm">
                <thead>
                  <tr className="border-b border-gray-200 bg-gray-100">
                    <th className="px-5 py-3 text-left font-display text-base tracking-wide text-secondary">Funktion</th>
                    <th className="px-5 py-3 text-left font-display text-base tracking-wide text-secondary">Person</th>
                  </tr>
                </thead>
                <tbody>
                  {vorstand.map((v, i) => (
                    <tr key={v.id} className={i > 0 ? "border-t border-gray-200" : ""}>
                      <td className="px-5 py-4 font-medium text-secondary">{v.funktion}</td>
                      <td className="px-5 py-4 text-gray-700">{v.person}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

        </div>
      </section>
    </div>
  );
}