---
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 = "en";
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);

// Zwei getrennte Dinge: die persönliche Vorstellung (Story-Box, "Hallo, ich bin ...") ist reiner
// Vorstellungstext OHNE Kaufversprechen — die zeigt VanVan für JEDEN im Admin definierten
// Charakter, auch schon bevor dafür ein Produkt existiert. Die "Mehr über mich"-Schaltfläche
// erscheint dabei nur, wenn der Charakter auch wirklich einen externen Link (mehrLink) hat.
// Eine echte Shop-KARTE (Foto/Preis/Kaufinfos) bekommt ein Charakter dagegen NUR, wenn ihm im
// Admin auch wirklich ein Produkt mit genau diesem Charakter-Code zugeordnet wurde (das Feld
// "Charakter" am Produkt = seine "Rolle") — ohne echtes Produkt gibt es keine Karte, die einen
// Kauf vortäuscht.
const characters = sub.characters ?? [];
const characterEntries = characters.map((char) => ({
  char,
  product: alleProdukte.find((p) => p.charakter === char.slug),
}));
const characterEntriesMitProdukt = characterEntries.filter((e) => e.product);
const characterEntriesFuerStory = characterEntries.filter((e, i) => i === 0 || e.product);

// Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.
const zugeordneteSlugs = new Set(characterEntriesMitProdukt.map((e) => e.product!.slug));
const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
const hatStoryBoxen = characterEntriesFuerStory.length > 0;
const hatProduktKarten = characterEntriesMitProdukt.length > 0;
const hatWeitere = weitere.length > 0;
const komplettLeer = !hatProduktKarten && !hatWeitere;
const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
---
<Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} at 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="/en/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/en/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.bannerName ? sub.bannerName[lang] : sub.name[lang]}</h1>
      </div>
    </section>
  </div>

  {hatStoryBoxen && (
    <section class="section-tight">
      <div class="container">
        <div class="character-stories">
          {characterEntriesFuerStory.map(({ char }) => (
            <div class="card character-story">
              {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
              <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>
              {char.mehrLink && (
                <p class="character-more-lead">
                  {t.shop.moreAboutCharacterLead}{" "}
                  <a class="btn btn-outline btn-sm" href={char.mehrLink} target="_blank" rel="noopener">here →</a>
                </p>
              )}
            </div>
          ))}
        </div>

        {hatProduktKarten && (
          <div class="grid grid-3">
            {characterEntriesMitProdukt.map(({ product }) => <ProductCard product={product!} lang={lang} />)}
          </div>
        )}
        {platzhalterInStorySektion && (
          <div class="grid grid-3">
            {[0, 1, 2].map(() => (
              <div class="card character-card">
                <div class="product-media">
                  <div class="img-placeholder" role="img" aria-label={sub.name[lang]}></div>
                </div>
                <h3>{sub.name[lang]}</h3>
                <p class="character-card-desc">{t.shop.subcategoryEmpty}</p>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  )}

  {eigeneLeerSektion && (
    <section class="section-tight">
      <div class="container">
        <div class="grid grid-3">
          {[0, 1, 2].map(() => (
            <div class="card character-card">
              <div class="product-media">
                <div class="img-placeholder" role="img" aria-label={sub.name[lang]}></div>
              </div>
              <h3>{sub.name[lang]}</h3>
              <p class="character-card-desc">{t.shop.subcategoryEmpty}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )}

  {hatWeitere && (
    <section class="section-tight">
      <div class="container">
        {hatProduktKarten && <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={`/en/shop/${category.slug}/`}>← {category.name[lang]}</a>
        <a class="btn btn-outline" href="/en/shop/">{t.common.toShop}</a>
      </div>
    </div>
  </section>
</Layout>
