---
import Layout from "../../../layouts/Layout.astro";
import ProductCard from "../../../components/ProductCard.astro";
import { categories, getCategory, getSubcategory } from "../../../data/categories";
import { productsByUnterkategorie } from "../../../data/products";
import type { Locale } from "../../../i18n/config";
import { useTranslations } from "../../../i18n/ui";

export function getStaticPaths() {
  return categories.flatMap((c) =>
    (c.subcategories ?? []).map((s) => ({ params: { kategorie: c.slug, unterkategorie: s.slug } }))
  );
}

const lang: Locale = "de";
const t = useTranslations(lang);
const { kategorie, unterkategorie } = Astro.params;
const category = getCategory(kategorie!)!;
const sub = getSubcategory(kategorie!, unterkategorie!)!;

// Alle Produkte dieser Unterkategorie (unabhängig davon, welchem Charakter sie zugeordnet sind).
const alleProdukte = productsByUnterkategorie(category.slug, sub.slug);

// Jeder Charakter dieser Tier-Familie bekommt seine eigene Box, abwechselnd Foto links/rechts —
// 1. Charakter links, 2. rechts, 3. wieder links, usw. Sobald VanVan im Adminbereich neue
// Charaktere UND passende Produkte ergänzt, wächst diese Liste automatisch mit. Fehlt einem
// Charakter noch ein echtes Produkt, zeigt seine Box trotzdem schon den Charaktertext (nur ohne
// Foto) — die Seite muss nicht auf das erste Foto warten, um zu existieren.
const characters = sub.characters ?? [];
const characterEntries = characters.map((char, index) => ({
  char,
  product: alleProdukte.find((p) => p.charakter === char.slug),
  reverse: index % 2 === 1,
}));

// Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.
const zugeordneteSlugs = new Set(characterEntries.map((e) => e.product?.slug).filter(Boolean));
const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
---
<Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} bei Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
  <div class="container">
    <p class="small breadcrumb" style="margin-top:1.5rem;">
      <a href="/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/shop/${category.slug}/`}>{category.name[lang]}</a> / <strong>{sub.name[lang]}</strong>
    </p>
    <section class="page-banner" style="background-image:url('/img/banner-shop.webp'); --banner-ratio: 1600 / 729;">
      <div class="page-banner-content">
        <span class="eyebrow" aria-hidden="true">{category.icon} {category.name[lang]}</span>
        <h1>{sub.name[lang]}</h1>
      </div>
    </section>
  </div>

  {characterEntries.length > 0 ? (
    characterEntries.map(({ char, product, reverse }) => (
      <section class="section-tight">
        <div class={`container grid grid-2 intro ${reverse ? "intro-reverse" : ""}`}>
          {product ? (
            <a class="portrait-frame portrait" href={`/produkt/${product.slug}/`} aria-label={product.name[lang]}>
              {product.bilder && product.bilder.length > 0 ? (
                <img class="product-photo" src={product.bilder[0]} alt={product.name[lang]} loading="lazy" />
              ) : (
                <div class="img-placeholder" role="img" aria-label={product.name[lang]}></div>
              )}
            </a>
          ) : (
            <div class="portrait-frame portrait">
              <div class="img-placeholder" role="img" aria-label={char.name[lang]}></div>
            </div>
          )}
          <div class="intro-text">
            {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
            <h2>{product ? <a href={`/produkt/${product.slug}/`}>{product.name[lang]}</a> : char.name[lang]}</h2>
            <p class="lead">{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}</p>
            {char.mehrLink && (
              <div class="character-more">
                <p>Wenn du mehr über mich erfahren möchtest, dann klicke</p>
                <a class="btn btn-outline" href={char.mehrLink} target="_blank" rel="noopener">hier →</a>
              </div>
            )}
          </div>
        </div>
      </section>
    ))
  ) : (
    <section class="section-tight">
      <div class="container">
        <p class="small">{t.shop.subcategoryEmpty}</p>
      </div>
    </section>
  )}

  {weitere.length > 0 && (
    <section class="section-tight">
      <div class="container">
        <h2 class="text-center small more-variants-label">{t.shop.moreVariants}</h2>
        <div class="grid grid-3">{weitere.map((p) => <ProductCard product={p} lang={lang} />)}</div>
      </div>
    </section>
  )}

  <section class="section-tight">
    <div class="container">
      <div class="btn-row">
        <a class="btn btn-outline" href={`/shop/${category.slug}/`}>← {category.name[lang]}</a>
        <a class="btn btn-outline" href="/shop/">{t.common.toShop}</a>
      </div>
    </div>
  </section>
</Layout>
