import Link from "next/link";
import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { EditionCard } from "@/components/EditionCard";
import { PageHero } from "@/components/PageHero";
import { PhotoStrip } from "@/components/PhotoStrip";
import { Section } from "@/components/Section";
import {
  getCompetition,
  getCompetitions,
  getEditionsFor,
  type CompetitionSlug,
} from "@/lib/content";
import { contact } from "@/lib/contact";
import { photos } from "@/lib/reviews";

export function generateStaticParams() {
  return getCompetitions().map((c) => ({ slug: c.slug }));
}

export async function generateMetadata(
  props: PageProps<"/yarismalar/[slug]">,
): Promise<Metadata> {
  const { slug } = await props.params;
  const c = getCompetition(slug);
  if (!c) return {};
  return {
    title: c.name,
    description: c.tagline,
  };
}

export default async function CompetitionPage(
  props: PageProps<"/yarismalar/[slug]">,
) {
  const { slug } = await props.params;
  const c = getCompetition(slug);
  if (!c) notFound();
  const editions = getEditionsFor(slug as CompetitionSlug);
  const upcoming = editions.filter((e) => e.status !== "past");
  const past = editions.filter((e) => e.status === "past");

  const heroPhoto =
    c.slug === "hands-on-challenge" ? photos.cemberlitas[7] : undefined;

  const strip =
    c.slug === "hands-on-challenge"
      ? [0, 19, 26, 37].map((i) => photos.cemberlitas[i])
      : [];

  const tags = (
    <>
      {c.categories?.map((cat) => (
        <span
          key={cat}
          className="border border-white/50 bg-white/10 px-3 py-1 text-xs font-black uppercase tracking-[0.2em]"
        >
          {cat}
        </span>
      ))}
      {c.ageGroups?.map((a) => (
        <span
          key={a}
          className="bg-yellow-300 px-3 py-1 text-xs font-black uppercase tracking-[0.2em] text-neutral-900"
        >
          {a}
        </span>
      ))}
    </>
  );

  return (
    <>
      <PageHero
        eyebrow="Yarışma formatı"
        title={c.name}
        lead={c.tagline}
        tags={tags}
        variant={heroPhoto ? "photo" : "solid"}
        photo={heroPhoto ? { src: heroPhoto.src, alt: `${c.name} sahne` } : undefined}
      />

      {/* Upcoming */}
      {upcoming.length > 0 && (
        <Section eyebrow="Yaklaşan" title="Sıradaki edisyonlar">
          <div className="grid gap-4 md:grid-cols-3">
            {upcoming.map((e) => (
              <EditionCard key={e.slug} e={e} />
            ))}
          </div>
        </Section>
      )}

      {/* Format body */}
      <Section tone="muted" eyebrow="Format" title="Nasıl işliyor">
        <div
          className="prose-impact max-w-3xl"
          dangerouslySetInnerHTML={{ __html: c.bodyHtml }}
        />
      </Section>

      {/* Photo strip (for Hands-On) */}
      {strip.length > 0 && (
        <section className="border-b-2 border-neutral-900 bg-white">
          <div className="mx-auto max-w-[1400px] px-6 py-14 md:px-10">
            <PhotoStrip photos={strip} />
          </div>
        </section>
      )}

      {/* Past editions */}
      {past.length > 0 && (
        <Section eyebrow="Geçmiş" title="Önceki edisyonlar">
          <div className="grid gap-4 md:grid-cols-3">
            {past.map((e) => (
              <EditionCard key={e.slug} e={e} />
            ))}
          </div>
        </Section>
      )}

      {/* CTA */}
      <Section tone="yellow">
        <div className="flex flex-col items-start gap-6 md:flex-row md:items-center md:justify-between">
          <div>
            <h3 className="text-balance text-3xl font-black leading-tight tracking-tight md:text-4xl">
              Başvuru veya sorularınız için
            </h3>
            <p className="mt-3 max-w-xl text-neutral-800">
              Bir sonraki edisyon için haberdar olmak ister misin? Bize yaz ya da WhatsApp
              grubuna katıl.
            </p>
          </div>
          <div className="flex flex-wrap gap-3">
            <a
              href={`mailto:${contact.email}?subject=${encodeURIComponent(c.name)}`}
              className="bg-neutral-900 px-5 py-3.5 text-xs font-black uppercase tracking-wider text-white hover:bg-violet-700"
            >
              {contact.email}
            </a>
            <a
              href={contact.whatsapp.url}
              target="_blank"
              rel="noreferrer noopener"
              className="border-2 border-neutral-900 bg-white px-5 py-3.5 text-xs font-black uppercase tracking-wider hover:bg-neutral-900 hover:text-white"
            >
              WhatsApp topluluk
            </a>
            <Link
              href="/yarismalar/hands-on-challenge"
              className="px-5 py-3.5 text-xs font-black uppercase tracking-wider text-neutral-800 hover:text-violet-700"
            >
              Diğer formatlar →
            </Link>
          </div>
        </div>
      </Section>
    </>
  );
}
