---
import Layout from "../../../layouts/Layout.astro";
import ProductCard from "../../../components/ProductCard.astro";
import HeartRating from "../../../components/HeartRating.astro";
import { products, getProduct, productsByCategory, durchschnittsbewertung, anzahlBewertungen } from "../../../data/products";
import { getCategory } from "../../../data/categories";
import type { Locale } from "../../../i18n/config";
import { useTranslations } from "../../../i18n/ui";
import { formatPrice } from "../../../i18n/format";
import { effektiverPreis, rabattLabel, hatAktivenRabatt } from "../../../data/rabatt";

export function getStaticPaths() {
  return products.map((p) => ({ params: { slug: p.slug } }));
}

const lang: Locale = "ch";
const t = useTranslations(lang);
const { slug } = Astro.params;
const product = getProduct(slug!)!;
const category = getCategory(product.kategorie);
const empfehlungen = productsByCategory(product.kategorie).filter((p) => p.slug !== product.slug).slice(0, 3);

const name = product.name[lang];
const desc = product.beschreibung[lang];

const badgeLabel: Record<string, string> = { neu: t.badge.neu, bestseller: t.badge.bestseller, sale: t.badge.sale, handgemacht: t.badge.handgemacht };
const finalPrice = effektiverPreis(product);
const discountBadge = rabattLabel(product);
const showOldAsPreis = !product.preisAlt && hatAktivenRabatt(product);
const mengenrabatt = product.rabatt?.mengenrabatt ?? [];
const bewertungSchnitt = durchschnittsbewertung(product);
const bewertungAnzahl = anzahlBewertungen(product);

const felder: [string, string | undefined][] = [
  [t.product.articleNo, product.artikelnummer],
  [t.product.material, product.material],
  [t.product.size, product.groesse],
  [t.product.colors, product.farben?.join(", ")],
  [t.product.included, product.lieferumfang],
  [t.product.care, product.pflegehinweise],
  [t.product.delivery, product.lieferzeit],
];
---
<Layout title={name} description={desc} lang={lang} path={`/produkt/${product.slug}/`}>
  <section class="section-tight">
    <div class="container">
      <div class="product-back-row">
        <a href={`/ch/shop/${product.kategorie}/`} class="product-back-btn" id="product-back-btn">{t.common.back}</a>
      </div>
      <p class="small breadcrumb">
        <a href="/ch/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/ch/shop/${product.kategorie}/`}>{category?.name[lang]}</a> / <strong>{name}</strong>
      </p>

      <div class="grid grid-2 product-detail">
        <div>
          {product.bilder && product.bilder.length > 0 ? (
            <>
              <img id="product-hero-img" class="product-photo product-hero" src={product.bilder[0]} alt={name} />
              {product.bilder.length > 1 && (
                <div class="thumb-row">
                  {product.bilder.map((bild) => (
                    <img class="product-photo thumb" src={bild} alt={name} data-full={bild} />
                  ))}
                </div>
              )}
            </>
          ) : (
            <div class="img-placeholder product-hero" role="img" aria-label={`${t.common.photoSoon}: ${name}`}>
              {t.common.photoSoon}<br /><span class="small">{t.product.photoNote}</span>
            </div>
          )}
        </div>

        <div>
          <div class="badge-row">
            {product.badges.map((b) => <span class={`badge ${b === "sale" ? "badge-sale" : ""}`}>{badgeLabel[b]}</span>)}
            {product.bestand === 0 && <span class="badge badge-sold-out">{t.badge.ausverkauft}</span>}
          </div>
          <h1>{name}</h1>
          {bewertungSchnitt !== null && (
            <a href="#bewertungen" class="review-summary-link">
              <HeartRating bewertung={bewertungSchnitt} size={16} showValue={true} anzahlLabel={t.product.reviewCount(bewertungAnzahl)} />
            </a>
          )}
          <div class="price-row-detail">
            {product.preisAlt && <span class="price-old">{formatPrice(product.preisAlt, lang)}</span>}
            {showOldAsPreis && <span class="price-old">{formatPrice(product.preis, lang)}</span>}
            <span class="price-detail">{formatPrice(finalPrice, lang)}</span>
            {discountBadge && <span class="badge badge-rabatt">{discountBadge}</span>}
          </div>
          {mengenrabatt.length > 0 && (
            <ul class="mengenrabatt-list small">
              {mengenrabatt.map((stufe) => <li>{t.cart.mengenrabattTier(String(stufe.abMenge), String(stufe.prozent))}</li>)}
            </ul>
          )}
          <p class="small">{t.common.vatNote} · {t.common.plusShipping}</p>
          <p class="lead">{desc}</p>

          <div class="qty-row">
            <label for="qty">{t.common.quantity}</label>
            <div class="qty-stepper">
              <button type="button" id="qty-dec" aria-label="−">−</button>
              <input type="number" id="qty" min="1" max={product.bestand} value={product.bestand > 0 ? 1 : 0} inputmode="numeric" data-bestand={product.bestand} />
              <button type="button" id="qty-inc" aria-label="+">+</button>
            </div>
            <button
              class="btn btn-primary"
              id="add-to-cart"
              disabled={product.bestand === 0}
              data-slug={product.slug}
              data-name={name}
              data-preis={finalPrice}
              data-bestand={product.bestand}
            >
              {product.bestand === 0 ? t.common.soldOut : t.common.addToCart}
            </button>
          </div>
          <p class="small" id="stock-hint" style="display:none;"></p>
          <p class="small" id="add-confirm" role="status" style="display:none; color: var(--c-accent);">{t.common.addedToCart}</p>

          {felder.some(([, v]) => v) && (
            <table class="specs">
              <tbody>
                {felder.filter(([, v]) => v).map(([k, v]) => (
                  <tr><th>{k}</th><td>{v}</td></tr>
                ))}
              </tbody>
            </table>
          )}

          <div class="todo-note">{t.product.todoFields}</div>
        </div>
      </div>
    </div>
  </section>

  <section class="section-tight" id="bewertungen">
    <div class="container">
      <h2>{t.product.reviewsTitle}</h2>
      {/* Server-gerenderter Ausgangszustand (funktioniert auch ohne JS) — wird beim Laden per
          Skript durch die mit lokal gespeicherten Kundenrezensionen zusammengeführte Liste
          ersetzt (siehe scripts/reviews.ts), damit neue Rezensionen sofort überall auftauchen. */}
      <div id="review-summary-slot">
        {bewertungSchnitt !== null ? (
          <div class="review-summary-row">
            <HeartRating bewertung={bewertungSchnitt} size={26} showValue={true} anzahlLabel={t.product.reviewCount(bewertungAnzahl)} />
          </div>
        ) : (
          <p class="small">{t.product.noReviews}</p>
        )}
      </div>
      <div class="review-list" id="review-list">
        {(product.bewertungen ?? []).map((r) => (
          <div class="card review-card">
            <div class="review-card-head">
              <span class="review-name">{r.name}</span>
              <HeartRating bewertung={r.bewertung} size={14} />
              {r.datum && <span class="review-date small">{r.datum}</span>}
            </div>
            {r.text && <p class="small">{r.text[lang]}</p>}
          </div>
        ))}
      </div>

      <div class="card review-form-card" id="review-form-card">
        <h3>{t.product.writeReviewTitle}</h3>
        <p class="small review-order-note" id="review-order-note" style="display:none;"></p>
        <p class="small review-login-note" id="review-login-note">{t.product.notLoggedInReview}</p>
        <form id="review-form">
          <div class="review-form-row">
            <span class="review-form-label">{t.product.yourRating}</span>
            <div id="review-heart-picker"></div>
          </div>
          <div id="review-name-field">
            <label for="review-name">{t.product.yourName}</label>
            <input type="text" id="review-name" maxlength="40" />
          </div>
          <div>
            <label for="review-text">{t.product.yourReview}</label>
            <textarea id="review-text" rows="3"></textarea>
          </div>
          <button class="btn btn-primary" type="submit">{t.product.submitReview}</button>
          <p class="small" id="review-error" style="display:none; color: var(--c-sale);">{t.product.reviewNeedsRating}</p>
          <p class="small" id="review-confirm" role="status" style="display:none; color: var(--c-accent);">{t.product.reviewSaved}</p>
        </form>
      </div>
    </div>
  </section>

  {empfehlungen.length > 0 && (
    <section class="section-tight">
      <div class="container">
        <h2>{t.product.recommendations}</h2>
        <div class="grid grid-3">{empfehlungen.map((p) => <ProductCard product={p} lang={lang} />)}</div>
      </div>
    </section>
  )}
</Layout>

<script>
  // Zrugg-Button obe uf de Produktsyte: springt zur würklich vorherige Syte im Browser-Verlauf
  // (z.B. Shop-Grid mit vorheriger Scroll-Position, Suechergebnis, Startsyte …), statt immer fescht
  // zur Kategorie z'gah. Nur wenn es en echte, gliich-originäre vorherige Syteufruef git
  // (document.referrer) — susch bliibt de normal Link zur Kategoriesyte als sinnvolli Rückfallebeni.
  const backBtn = document.getElementById("product-back-btn");
  backBtn?.addEventListener("click", (e) => {
    if (!document.referrer || window.history.length <= 1) return;
    try {
      if (new URL(document.referrer).origin === location.origin) {
        e.preventDefault();
        window.history.back();
      }
    } catch {
      // Kaputti/fremdi Referrer-URL — eifach bim normale Link zur Kategoriesyte blyybe.
    }
  });
</script>
<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, maxInCartShortText: t.common.maxInCartShort, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
  window.__productStockVars = { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText };
</script>
<script>
  import { addToCart, getCart } from "../../../scripts/cart";
  const { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText } = (window as any).__productStockVars;
  const btn = document.getElementById("add-to-cart") as HTMLButtonElement | null;
  const qtyInput = document.getElementById("qty") as HTMLInputElement;
  const confirm = document.getElementById("add-confirm")!;
  const stockHint = document.getElementById("stock-hint")!;
  const bestand = Number(qtyInput.dataset.bestand || 0);
  const slug = btn?.dataset.slug;

  // Nie mehr in den Warenkorb legen können, als tatsächlich auf Lager ist — zählt dabei mit,
  // was von diesem Produkt schon im Warenkorb liegt (nicht nur die aktuelle Eingabe hier).
  function bereitsImWarenkorb() {
    return getCart().find((i) => i.slug === slug)?.menge ?? 0;
  }
  function maxJetztHinzufuegbar() {
    return Math.max(0, bestand - bereitsImWarenkorb());
  }
  function clamp() {
    const max = maxJetztHinzufuegbar();
    let val = Math.max(0, Math.floor(Number(qtyInput.value) || 0));
    if (val > max) val = max;
    if (val < 1 && max > 0) val = 1;
    qtyInput.value = String(val);
    qtyInput.max = String(max);

    if (btn) {
      if (bestand === 0) {
        btn.disabled = true;
        btn.textContent = soldOutText;
      } else if (max === 0) {
        btn.disabled = true;
        btn.textContent = maxInCartShortText;
        stockHint.style.display = "block";
        stockHint.textContent = maxInCartText;
      } else {
        btn.disabled = false;
        btn.textContent = addToCartText;
        if (max <= 5) {
          stockHint.style.display = "block";
          stockHint.textContent = onlyLeftTemplate.replace("__N__", String(max));
        } else {
          stockHint.style.display = "none";
        }
      }
    }
    return val;
  }
  clamp();

  document.getElementById("qty-dec")?.addEventListener("click", () => {
    qtyInput.value = String(Math.max(1, Number(qtyInput.value) - 1));
    clamp();
  });
  document.getElementById("qty-inc")?.addEventListener("click", () => {
    qtyInput.value = String(Number(qtyInput.value) + 1);
    clamp();
  });
  qtyInput.addEventListener("input", clamp);
  qtyInput.addEventListener("change", clamp);

  btn?.addEventListener("click", () => {
    const menge = clamp();
    if (menge < 1) return;
    const { name, preis } = btn.dataset;
    addToCart({ slug: slug!, name: name!, preis: Number(preis) }, menge);
    confirm.style.display = "block";
    setTimeout(() => (confirm.style.display = "none"), 2500);
    clamp();
  });

  // Klick auf ein Miniaturbild zeigt es groß im Hauptbild an (mehrere Produktfotos).
  const heroImg = document.getElementById("product-hero-img") as HTMLImageElement | null;
  const thumbs = [...document.querySelectorAll<HTMLImageElement>(".thumb.product-photo")];
  thumbs.forEach((thumb) => {
    thumb.addEventListener("click", () => {
      if (heroImg && thumb.dataset.full) heroImg.src = thumb.dataset.full;
    });
  });

  // Auch das große Hauptbild lässt sich wischen (Finger auf dem Handy, Maus ziehen am PC) — springt
  // dabei einfach zum nächsten/vorherigen Miniaturbild, exakt wie ein Klick auf den Thumbnail.
  if (heroImg && thumbs.length > 1) {
    let startX = 0, startY = 0;
    heroImg.style.touchAction = "pan-y";
    heroImg.addEventListener("pointerdown", (e) => { startX = e.clientX; startY = e.clientY; });
    heroImg.addEventListener("pointerup", (e) => {
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;
      if (Math.abs(dx) < 40 || Math.abs(dx) < Math.abs(dy)) return;
      const aktuellerIndex = Math.max(0, thumbs.findIndex((th) => th.dataset.full && heroImg.src.endsWith(th.dataset.full)));
      const naechster = ((aktuellerIndex + (dx < 0 ? 1 : -1)) % thumbs.length + thumbs.length) % thumbs.length;
      heroImg.src = thumbs[naechster].dataset.full!;
    });
  }
</script>

<script
  define:vars={{
    slug: product.slug,
    serverReviews: (product.bewertungen ?? []).map((r) => ({ name: r.name, bewertung: r.bewertung, text: r.text?.[lang] ?? "", datum: r.datum ?? "" })),
    noReviewsText: t.product.noReviews,
    reviewCountOne: t.product.reviewCount(1),
    reviewCountOther: t.product.reviewCount(2),
    loginHintReview: t.product.loginHintReview,
    notLoggedInReview: t.product.notLoggedInReview,
    reviewFromOrderTemplate: t.product.reviewFromOrder("__NR__"),
    reviewNeedsRatingText: t.product.reviewNeedsRating,
    reviewSavedText: t.product.reviewSaved,
  }}
>
  window.__reviewVars = {
    slug, serverReviews, noReviewsText, reviewCountOne, reviewCountOther,
    loginHintReview, notLoggedInReview, reviewFromOrderTemplate, reviewNeedsRatingText, reviewSavedText,
  };
</script>
<script>
  import { heartsHtml, heartsPickerHtml, heartsPickerAktualisieren } from "../../../scripts/hearts";
  import { bewertungenZusammenfuehren, durchschnitt, fuegeBewertungHinzu, type AnzeigeBewertung } from "../../../scripts/reviews";
  import { isLoggedIn, getAccount, anzeigeName } from "../../../scripts/account";

  const {
    slug, serverReviews, noReviewsText, reviewCountOne, reviewCountOther,
    loginHintReview, notLoggedInReview, reviewFromOrderTemplate, reviewNeedsRatingText, reviewSavedText,
  } = (window as any).__reviewVars;

  function reviewCountLabel(n: number): string {
    return n === 1 ? reviewCountOne : reviewCountOther.replace(/^\d+/, String(n));
  }

  const summarySlot = document.getElementById("review-summary-slot")!;
  const listSlot = document.getElementById("review-list")!;

  function renderReviews() {
    const merged: AnzeigeBewertung[] = bewertungenZusammenfuehren(serverReviews, slug);
    const schnitt = durchschnitt(merged);

    summarySlot.innerHTML =
      schnitt === null
        ? `<p class="small">${noReviewsText}</p>`
        : `<div class="review-summary-row">${heartsHtml(schnitt, 26, { showValue: true, anzahlLabel: reviewCountLabel(merged.length) })}</div>`;

    listSlot.innerHTML = merged
      .map((r) => {
        const datum = r.datum ? `<span class="review-date small">${r.datum}</span>` : "";
        const text = r.text ? `<p class="small">${r.text.replace(/</g, "&lt;")}</p>` : "";
        return `<div class="card review-card"><div class="review-card-head"><span class="review-name">${r.name.replace(/</g, "&lt;")}</span>${heartsHtml(r.bewertung, 14)}${datum}</div>${text}</div>`;
      })
      .join("");
  }
  renderReviews();

  // Bewertungsformular: eigenes Herzen-Auswahlfeld (kein natives <select>, siehe scripts/hearts.ts)
  const picker = document.getElementById("review-heart-picker")!;
  picker.innerHTML = heartsPickerHtml(28);
  const pickerRoot = picker.querySelector<HTMLElement>("[data-heart-picker]")!;
  let gewaehlteBewertung = 0;
  pickerRoot.querySelectorAll<HTMLButtonElement>(".heart-pick").forEach((btn) => {
    const wert = Number(btn.dataset.wert);
    btn.addEventListener("mouseenter", () => heartsPickerAktualisieren(pickerRoot, wert));
    btn.addEventListener("mouseleave", () => heartsPickerAktualisieren(pickerRoot, gewaehlteBewertung));
    btn.addEventListener("click", () => {
      gewaehlteBewertung = wert;
      heartsPickerAktualisieren(pickerRoot, gewaehlteBewertung);
    });
  });

  // Name nur abfragen, wenn niemand angemeldet ist — angemeldete Kund:innen bewerten automatisch
  // unter ihrem Benutzernamen (siehe scripts/account.ts).
  const nameField = document.getElementById("review-name-field")!;
  const loginNote = document.getElementById("review-login-note")!;
  if (isLoggedIn()) {
    nameField.style.display = "none";
    loginNote.textContent = `${loginHintReview} ${anzeigeName(getAccount())}`;
  } else {
    nameField.style.display = "";
    loginNote.textContent = notLoggedInReview;
  }

  // Kommt der Aufruf von einer Bestellung im Kundenkonto ("Rezension schreiben"), steht die
  // Bestellnummer als ?bewerten=... in der URL — Hinweistext einblenden, zum Formular scrollen
  // und die Nummer beim Absenden mitschicken, damit das Konto sie als "✓ Bewertet" markieren kann.
  const bestellnummer = new URLSearchParams(location.search).get("bewerten");
  if (bestellnummer) {
    const note = document.getElementById("review-order-note")!;
    note.textContent = reviewFromOrderTemplate.replace("__NR__", bestellnummer);
    note.style.display = "block";
    document.getElementById("review-form-card")?.scrollIntoView({ behavior: "smooth", block: "center" });
  }

  const form = document.getElementById("review-form") as HTMLFormElement;
  const errorMsg = document.getElementById("review-error")!;
  const confirmMsg = document.getElementById("review-confirm")!;
  const nameInput = document.getElementById("review-name") as HTMLInputElement | null;
  const textInput = document.getElementById("review-text") as HTMLTextAreaElement;

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    if (gewaehlteBewertung < 1) {
      errorMsg.style.display = "block";
      return;
    }
    errorMsg.style.display = "none";
    fuegeBewertungHinzu(slug, {
      bewertung: gewaehlteBewertung,
      text: textInput.value,
      name: isLoggedIn() ? undefined : nameInput?.value,
      bestellnummer: bestellnummer || undefined,
    });
    textInput.value = "";
    gewaehlteBewertung = 0;
    heartsPickerAktualisieren(pickerRoot, 0);
    confirmMsg.style.display = "block";
    setTimeout(() => { confirmMsg.style.display = "none"; }, 3000);
    renderReviews();
  });
</script>
