---
import Layout from "../../layouts/Layout.astro";
import ProductCard from "../../components/ProductCard.astro";
import { products, getProduct } from "../../data/products";
import type { Locale } from "../../i18n/config";
import { useTranslations } from "../../i18n/ui";
import { formatPrice } from "../../i18n/format";
import { ABO_STUFEN, aboStufenKonfig, aboStufeName, aboStufeVorteil, type AboStufe } from "../../data/abo";

const lang: Locale = "de";
const t = useTranslations(lang);

// Bestellungen sind weiterhin Beispieldaten (siehe previewNote) — ECHT sind ab jetzt aber
// Anmeldung, Profil (Benutzername/Foto) und Rezensionen, gespeichert im localStorage dieses
// Geräts (siehe scripts/account.ts, scripts/reviews.ts). Jede Bestellposition referenziert
// einen echten Produkt-Slug — der Name kommt live aus den Produktdaten (mehrsprachig, immer
// konsistent mit dem Shop), damit "Rezension schreiben" wirklich zur passenden Seite führt.
const beispielBestellungenRoh = [
  {
    nummer: "VDB-2026-0184",
    datum: "28.07.2026",
    status: "versendet" as const,
    tracking: "00340434161094015791",
    artikel: [
      { slug: "hasidog-plushie-blaueroverall", menge: 1 },
      { slug: "perlen-armband-hellblau", menge: 1 },
    ],
  },
  {
    nummer: "VDB-2026-0157",
    datum: "12.07.2026",
    status: "abgeschlossen" as const,
    tracking: null,
    artikel: [{ slug: "haekelnadel-set-ergonomisch", menge: 1 }],
  },
];
const beispielBestellungen = beispielBestellungenRoh.map((b) => {
  const artikel = b.artikel.map((a) => {
    const p = getProduct(a.slug);
    return { ...a, name: p?.name[lang] ?? a.slug, preis: p?.preis ?? 0 };
  });
  return { ...b, artikel, summe: artikel.reduce((s, a) => s + a.preis * a.menge, 0) };
});

const statusLabel = {
  bezahlt: t.accountDash.statusBezahlt,
  bearbeitung: t.accountDash.statusBearbeitung,
  versandVorbereitet: t.accountDash.statusVersandVorbereitet,
  versendet: t.accountDash.statusVersendet,
  abgeschlossen: t.accountDash.statusAbgeschlossen,
} as const;

// Abo-Pläne: Namen/Vorteilstexte UND Preis/Rabatt kommen komplett aus den admin-editierbaren
// Einstellungen (src/content/abo-einstellungen.json) — VanVan kann im CMS alles zum Abo selbst
// pflegen. Reihenfolge fest klein → mittel → groß.
const aboPlanLabels: Record<AboStufe, { name: string; vorteil: string }> = {
  klein: { name: aboStufeName("klein", lang), vorteil: aboStufeVorteil("klein", lang) },
  mittel: { name: aboStufeName("mittel", lang), vorteil: aboStufeVorteil("mittel", lang) },
  gross: { name: aboStufeName("gross", lang), vorteil: aboStufeVorteil("gross", lang) },
};
// Eigenes Icon je Stufe (rein optisch, nicht admin-editierbar) — soll auf einen Blick erkennbar
// machen, dass es sich um eine aufsteigende Reihe handelt (Keimling → Blatt → Krone).
const aboPlanIcon: Record<AboStufe, string> = { klein: "🌱", mittel: "🌿", gross: "👑" };

// "Zuletzt angesehen" zeigt in dieser Vorschau einfach die ersten echten Produkte aus dem Shop —
// in Phase 2 kommt hier die tatsächliche Verlaufs-Historie der angemeldeten Person hin.
const zuletztAngesehen = products.slice(0, 3);
// "Offene Sendungen" = alles außer abgeschlossen (bezahlt/bearbeitung/versandVorbereitet/
// versendet), damit die Zahl exakt zu dem passt, was der "Offene Sendungen"-Tab tatsächlich
// zeigt. "Bestellungen" zählt entsprechend nur die schon angekommenen (abgeschlossenen).
const offeneSendungen = beispielBestellungen.filter((b) => b.status !== "abgeschlossen").length;
const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status === "abgeschlossen").length;
---
<Layout title="Mein Konto" description="Persönlicher Kundenbereich von Van's DIY & Bastelbedarf." lang={lang} path="/konto/angemeldet/">
  <section class="section-tight">
    <div class="container">
      <p class="todo-note" id="not-logged-in-note" style="display:none;">{t.accountDash.notLoggedIn}</p>
      <p class="todo-note" id="preview-note">{t.accountDash.previewNote}</p>
    </div>
  </section>

  <section class="section-tight">
    <div class="container">
      <div class="account-head card">
        <span class="account-head-sparkle account-head-sparkle-1" aria-hidden="true">✨</span>
        <span class="account-head-sparkle account-head-sparkle-2" aria-hidden="true">✨</span>
        <div class="account-head-identity">
          <span class="account-avatar-lg" id="dash-avatar" aria-hidden="true"></span>
          <div>
            <span class="eyebrow">{t.accountDash.eyebrow}</span>
            <h1 id="dash-greeting">{t.accountDash.greeting("…")}</h1>
            <p class="lead">{t.accountDash.lead}</p>
          </div>
        </div>
        <div class="account-head-actions">
          <button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
        </div>
        <div class="account-head-daten-row">
          <button type="button" class="btn btn-daten-hero" id="dash-daten-btn">
            <span class="btn-daten-hero-sparkle" aria-hidden="true">✨</span>
            {t.accountDash.datenHeaderBtn}
          </button>
        </div>
      </div>

      {/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
          "Meine Wunschliste" statt drei loser Kästchen — jedes Segment springt zum passenden
          Abschnitt weiter unten, Icon und Akzentfarbe passen zur jeweiligen Überschrift. */}
      <nav class="account-nav" aria-label={t.accountDash.navLabel}>
        <button type="button" class="account-nav-item account-nav-orders" data-tab="bestellungen">
          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
          <span class="account-nav-icon" aria-hidden="true">📦</span>
          <span class="account-nav-value">{angekommeneBestellungen}</span>
          <span class="account-nav-label">{t.accountDash.statOrders}</span>
        </button>
        <button type="button" class="account-nav-item account-nav-open" data-tab="offene">
          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
          <span class="account-nav-icon" aria-hidden="true">🚚</span>
          <span class="account-nav-value">{offeneSendungen}</span>
          <span class="account-nav-label">{t.accountDash.statOpen}</span>
        </button>
        <button type="button" class="account-nav-item account-nav-wishlist" data-tab="wunschliste">
          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
          <span class="account-nav-icon" aria-hidden="true">🩵</span>
          <span class="account-nav-value">0</span>
          <span class="account-nav-label">{t.accountDash.statWishlist}</span>
        </button>
        <button type="button" class="account-nav-item account-nav-loyalty" data-tab="treuebonus">
          <span class="account-nav-sparkle" aria-hidden="true">🌟</span>
          <span class="account-nav-icon" aria-hidden="true">🎁</span>
          <span class="account-nav-value" id="loyalty-nav-value">–</span>
          <span class="account-nav-label">{t.accountDash.statLoyalty}</span>
        </button>
        <button type="button" class="account-nav-item account-nav-abo" data-tab="abo">
          <span class="account-nav-sparkle" aria-hidden="true">🌟</span>
          <span class="account-nav-icon" aria-hidden="true">🎫</span>
          <span class="account-nav-value" id="abo-nav-value">–</span>
          <span class="account-nav-label">{t.accountDash.statAbo}</span>
        </button>
      </nav>
    </div>
  </section>

  <section class="section-tight" id="bestellungen">
    <div class="container">
      <h2>{t.accountDash.ordersTitle}</h2>
      <p class="small" id="orders-empty-note" style="display:none;" data-empty-open={t.accountDash.noOpenOrders} data-empty-arrived={t.accountDash.noArrivedOrders}></p>
      <div class="order-list" id="order-list">
        {beispielBestellungen.map((b) => (
          <div class={`card order-card order-card-${b.status}`}>
            <div class="order-card-head">
              <div>
                <span class="order-no">{t.accountDash.orderNo} {b.nummer}</span>
                <span class="small order-meta">{t.accountDash.orderDate} {b.datum}</span>
              </div>
              <span class={`badge order-status order-status-${b.status}`}>{statusLabel[b.status]}</span>
            </div>

            <ul class="order-items">
              {b.artikel.map((a) => (
                <li>
                  <span>{a.menge}× {a.name}</span>
                  <span class="order-item-right">
                    <span class="order-item-price">{formatPrice(a.preis * a.menge, lang)}</span>
                    {/* Zustand (Button vs. "✓ Bewertet") hängt vom localStorage ab — wird per JS
                        beim Laden gesetzt (siehe Script unten), Grundzustand ist der Button. */}
                    <span class="order-item-review" data-order-review data-bestellnummer={b.nummer} data-slug={a.slug}>
                      <a class="small review-link" href={`/produkt/${a.slug}/?bewerten=${b.nummer}`}>{t.accountDash.reviewBtn}</a>
                    </span>
                  </span>
                </li>
              ))}
            </ul>

            <div class="order-card-foot">
              <span class="order-total">{t.accountDash.orderTotal}: <strong>{formatPrice(b.summe, lang)}</strong></span>
              <div class="order-actions">
                {b.tracking && <a class="btn btn-outline btn-sm" href={`https://www.dhl.de/de/privatkunden/dhl-sendungsverfolgung.html?piececode=${b.tracking}`} target="_blank" rel="noopener">{t.accountDash.trackingBtn}</a>}
                <button type="button" class="btn btn-outline btn-sm" data-open-invoice={`invoice-${b.nummer}`}>{t.accountDash.invoiceBtn}</button>
                <button
                  type="button"
                  class="btn btn-outline btn-sm"
                  data-download-invoice={b.nummer}
                  data-invoice-datum={b.datum}
                  data-invoice-summe={b.summe}
                  data-invoice-artikel={JSON.stringify(b.artikel.map((a) => ({ name: a.name, menge: a.menge, preis: a.preis })))}
                  data-label-default={t.accountDash.invoiceDownloadBtn}
                  data-label-loading={t.accountDash.invoiceDownloading}
                >{t.accountDash.invoiceDownloadBtn}</button>
                <a class="btn btn-outline btn-sm" href="/shop/">{t.accountDash.reorderBtn}</a>
              </div>
            </div>
            {b.tracking && (
              <p class="small order-tracking-no">{t.accountDash.trackingLabel}: <code>{b.tracking}</code></p>
            )}

            {/* Rechnung direkt auf der Seite ansehen (natives <dialog>, siehe Skript unten) —
                kein Download nötig. Empfängername wird beim Öffnen live aus dem Konto befüllt
                (siehe .invoice-billto-name), Adresse ist bewusst dieselbe Platzhalter-Adresse
                wie oben unter "Meine Daten". */}
            <dialog class="invoice-dialog" id={`invoice-${b.nummer}`}>
              <div class="invoice-card">
                <div class="invoice-head">
                  <div>
                    <h3>{t.accountDash.invoiceTitle}</h3>
                    <p class="invoice-meta">{t.accountDash.invoiceNumberLabel}: {b.nummer}</p>
                    <p class="invoice-meta">{t.accountDash.invoiceDateLabel}: {b.datum}</p>
                  </div>
                  <button type="button" class="invoice-close" data-close-invoice aria-label={t.accountDash.invoiceCloseBtn}>✕</button>
                </div>

                <div class="invoice-parties">
                  <div>
                    <h4>{t.accountDash.invoiceSellerLabel}</h4>
                    <p>Van's DIY &amp; Bastelbedarf</p>
                  </div>
                  <div>
                    <h4>{t.accountDash.invoiceBillToLabel}</h4>
                    <p><span class="invoice-billto-name">–</span><br />Musterstraße 1<br />10115 Berlin<br />Deutschland</p>
                  </div>
                </div>

                <table class="invoice-table">
                  <thead>
                    <tr>
                      <th>{t.accountDash.invoiceItemLabel}</th>
                      <th>{t.accountDash.invoiceQtyLabel}</th>
                      <th>{t.accountDash.invoiceUnitPriceLabel}</th>
                      <th>{t.accountDash.invoiceSumLabel}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {b.artikel.map((a) => (
                      <tr>
                        <td>{a.name}</td>
                        <td>{a.menge}</td>
                        <td>{formatPrice(a.preis, lang)}</td>
                        <td>{formatPrice(a.preis * a.menge, lang)}</td>
                      </tr>
                    ))}
                    <tr class="invoice-total-row">
                      <td colspan="3">{t.accountDash.orderTotal}</td>
                      <td>{formatPrice(b.summe, lang)}</td>
                    </tr>
                  </tbody>
                </table>

                <p class="invoice-vat-note">{t.common.vatNote}</p>

                <div class="invoice-foot">
                  <button type="button" class="btn btn-outline btn-sm" data-close-invoice>{t.accountDash.invoiceCloseBtn}</button>
                </div>
              </div>
            </dialog>
          </div>
        ))}
      </div>
    </div>
  </section>

  <section class="section-tight" id="wunschliste">
    <div class="container">
      <h2>{t.accountDash.wishlistTitle}</h2>
      <div class="card">
        <p class="small" style="margin:0;">{t.accountDash.wishlistEmpty}</p>
      </div>
    </div>
  </section>

  {zuletztAngesehen.length > 0 && (
    <section class="section-tight" id="zuletzt-angesehen">
      <div class="container">
        <h2>{t.accountDash.recentTitle}</h2>
        <div class="grid grid-3">{zuletztAngesehen.map((p) => <ProductCard product={p} lang={lang} />)}</div>
      </div>
    </section>
  )}

  <section class="section-tight" id="meine-daten">
    <div class="container">
      <h2>{t.accountDash.profileTitle}</h2>
      <div class="card profile-card">
        <span class="profile-card-sparkle profile-card-sparkle-1" aria-hidden="true">✨</span>
        <span class="profile-card-sparkle profile-card-sparkle-2" aria-hidden="true">✨</span>
        <div class="profile-photo-row">
          <span class="account-avatar-lg" id="profile-avatar" aria-hidden="true"></span>
          <div>
            <span class="small" style="display:block; margin-bottom:0.4rem;">{t.accountDash.photoLabel}</span>
            <label class="btn btn-outline btn-sm profile-photo-btn">
              {t.accountDash.photoChange}
              <input type="file" accept="image/*" id="profile-photo-input" style="display:none;" />
            </label>
            <button type="button" class="btn btn-outline btn-sm" id="profile-photo-remove">{t.accountDash.photoRemove}</button>
          </div>
        </div>

        {/* Optionaler Spitzname zuerst (Bonus, wird bevorzugt angezeigt), darunter der feste
            Pflicht-Name (z.B. für Bestellungen/Lieferadresse). */}
        <div class="profile-field">
          <label for="profile-username">{t.accountDash.usernameLabel}</label>
          <div class="profile-field-row">
            <input type="text" id="profile-username" maxlength="40" />
            <button type="button" class="btn btn-primary btn-sm" id="profile-username-save">{t.accountDash.usernameSave}</button>
          </div>
          <span class="small" id="profile-username-status" style="display:none; color: var(--c-accent);">{t.accountDash.usernameSaved}</span>
          <span class="small" style="display:block; color: var(--c-text-muted); margin-top:0.3em;">{t.accountDash.usernameHint}</span>
        </div>

        <table class="specs">
          <tbody>
            {/* Name, E-Mail und Lieferadresse sind fest (wie bei einer echten Bestellung) — nur
                der Spitzname oben ist änderbar. */}
            <tr><th>{t.accountDash.profileName}</th><td id="profile-name-display">–</td></tr>
            <tr><th>{t.accountDash.profileEmail}</th><td id="profile-email">–</td></tr>
            <tr><th>{t.accountDash.profileAddress}</th><td>Musterstraße 1<br />10115 Berlin<br />Deutschland</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  {/* Treuebonus: 10 gültige, abgeschlossene Bestellungen → 20% auf einen frei wählbaren Artikel
      (siehe scripts/account.ts). Fortschritt/Status kommen komplett aus dem Konto und werden per
      JS befüllt (siehe Skript unten) — hier nur das Gerüst mit sinnvollen Leerzuständen. */}
  <section class="section-tight" id="treuebonus">
    <div class="container">
      <h2>{t.accountDash.loyaltyTitle}</h2>
      <div class="card loyalty-card">
        <span class="loyalty-card-sparkle loyalty-card-sparkle-1" aria-hidden="true">✨</span>
        <span class="loyalty-card-sparkle loyalty-card-sparkle-2" aria-hidden="true">✨</span>
        {/* Treuebonus ist an ein aktives Abo gekoppelt (soll als Zusatzanreiz fürs Abo wirken) —
            ohne aktives Abo wird dieser gesperrte Hinweis statt des Fortschritts gezeigt (siehe
            renderLoyalty() im Skript unten, treueFortschritt().gesperrt). */}
        <div class="loyalty-inner" id="loyalty-locked-content" style="display:none;">
          <p class="loyalty-locked-title">{t.accountDash.loyaltyLockedTitle}</p>
          <p class="small">{t.accountDash.loyaltyLockedText}</p>
          <button type="button" class="btn btn-primary btn-sm" id="loyalty-locked-abo-btn" style="align-self:flex-start;">{t.accountDash.loyaltyLockedBtn}</button>
        </div>
        <div class="loyalty-inner" id="loyalty-unlocked-content">
          <div class="loyalty-progress-bar"><div class="loyalty-progress-fill" id="loyalty-bar-fill"></div></div>
          <p class="loyalty-progress-text" id="loyalty-progress-text"></p>
          <p id="loyalty-status-text"></p>
          <a class="btn btn-primary btn-sm" id="loyalty-cart-link" href="/warenkorb/" style="display:none; align-self:flex-start;">{t.accountDash.loyaltyGoToCart}</a>
          <p class="small loyalty-explainer">{t.accountDash.loyaltyExplainer}</p>
        </div>
      </div>
    </div>
  </section>

  {/* Abosystem: drei Mitgliedschaftsstufen mit dauerhaftem Rabatt + Teddy-Prämien. Preise/Rabatte
      kommen aus src/content/abo-einstellungen.json (admin-editierbar via Decap CMS), Status/
      Fortschritt/Benachrichtigungen komplett aus dem Konto (siehe scripts/account.ts) und werden
      per JS befüllt (Skript unten) — hier nur das Gerüst mit sinnvollen Leerzuständen. */}
  <section class="section-tight" id="abo">
    <div class="container">
      <h2>{t.accountDash.aboTitle}</h2>
      <p class="lead">{t.accountDash.aboIntro}</p>

      <div class="abo-plans grid grid-3">
        {ABO_STUFEN.map((stufe) => {
          const cfg = aboStufenKonfig(stufe);
          const labels = aboPlanLabels[stufe];
          return (
            <div class={`card abo-plan-card abo-plan-${stufe}`} data-abo-plan={stufe} data-abo-plan-aktiv={cfg.aktiv ? "1" : "0"}>
              <span class="abo-plan-badge" data-abo-active-badge style="display:none;">{t.accountDash.aboAktivesLabel}</span>
              <span class="abo-plan-icon" aria-hidden="true">{aboPlanIcon[stufe]}</span>
              <h3>{labels.name}</h3>
              <p class="abo-plan-price">{formatPrice(cfg.preis, lang)} <span class="small">{t.accountDash.aboPreisSuffix}</span></p>
              <span class="abo-plan-discount-chip">💰 −{cfg.rabattProzent}%</span>
              <div class="abo-plan-rewards">
                {cfg.kleinIntervallMonate > 0 && (
                  <span class="abo-plan-reward-chip">🧸 {t.accountDash.aboRewardEveryLabel.replace("{n}", String(cfg.kleinIntervallMonate))}</span>
                )}
                {cfg.grossIntervallMonate > 0 && (
                  <span class="abo-plan-reward-chip abo-plan-reward-chip-gross">🧸🧸 {t.accountDash.aboRewardEveryLabel.replace("{n}", String(cfg.grossIntervallMonate))}</span>
                )}
              </div>
              <p class="small abo-plan-vorteil">{labels.vorteil}</p>
              <button type="button" class="btn btn-primary btn-sm abo-plan-btn" data-abo-choose={stufe}>{t.accountDash.aboAbschliessenBtn}</button>
            </div>
          );
        })}
      </div>

      <div class="card loyalty-card abo-status-card" id="abo-status-card" style="display:none;">
        <span class="loyalty-card-sparkle loyalty-card-sparkle-1" aria-hidden="true">✨</span>
        <span class="loyalty-card-sparkle loyalty-card-sparkle-2" aria-hidden="true">✨</span>
        <h3>{t.accountDash.aboStatusTitle} <span class="badge" id="abo-active-badge"></span></h3>

        <div class="abo-stat-grid">
          <div class="abo-stat-tile">
            <span class="abo-stat-icon" aria-hidden="true">🎫</span>
            <span class="abo-stat-label">{t.accountDash.aboFieldStufe}</span>
            <span class="abo-stat-value" id="abo-field-stufe">–</span>
          </div>
          <div class="abo-stat-tile">
            <span class="abo-stat-icon" aria-hidden="true">💶</span>
            <span class="abo-stat-label">{t.accountDash.aboFieldPreis}</span>
            <span class="abo-stat-value" id="abo-field-preis">–</span>
          </div>
          <div class="abo-stat-tile abo-stat-tile-highlight">
            <span class="abo-stat-icon" aria-hidden="true">💰</span>
            <span class="abo-stat-label">{t.accountDash.aboFieldRabatt}</span>
            <span class="abo-stat-value" id="abo-field-rabatt">–</span>
          </div>
          <div class="abo-stat-tile">
            <span class="abo-stat-icon" aria-hidden="true">📅</span>
            <span class="abo-stat-label">{t.accountDash.aboFieldStart}</span>
            <span class="abo-stat-value" id="abo-field-start">–</span>
          </div>
          <div class="abo-stat-tile">
            <span class="abo-stat-icon" aria-hidden="true">🔁</span>
            <span class="abo-stat-label">{t.accountDash.aboFieldNaechsteZahlung}</span>
            <span class="abo-stat-value" id="abo-field-naechste">–</span>
          </div>
          <div class="abo-stat-tile">
            <span class="abo-stat-icon" aria-hidden="true">⏱️</span>
            <span class="abo-stat-label">{t.accountDash.aboFieldLaufzeit}</span>
            <span class="abo-stat-value" id="abo-field-laufzeit">–</span>
          </div>
        </div>

        <div class="abo-reward-progress-block">
          <div class="abo-reward-progress" id="abo-fortschritt-klein-wrap" style="display:none;">
            <div class="abo-reward-progress-head">
              <span>🧸 {t.accountDash.aboEinloesenKleinLabel}</span>
              <span id="abo-fortschritt-klein-text"></span>
            </div>
            <div class="loyalty-progress-bar abo-reward-bar"><div class="loyalty-progress-fill" id="abo-fortschritt-klein-fill"></div></div>
          </div>
          <div class="abo-reward-progress" id="abo-fortschritt-gross-wrap" style="display:none;">
            <div class="abo-reward-progress-head">
              <span>🧸🧸 {t.accountDash.aboEinloesenGrossLabel}</span>
              <span id="abo-fortschritt-gross-text"></span>
            </div>
            <div class="loyalty-progress-bar abo-reward-bar"><div class="loyalty-progress-fill abo-reward-bar-gross" id="abo-fortschritt-gross-fill"></div></div>
          </div>
        </div>

        <div class="abo-erhalten-chip">
          <span aria-hidden="true">🧸</span>
          <span id="abo-praemien-erhalten"></span>
        </div>
        <p id="abo-gekuendigt-hinweis" class="small" style="display:none;"></p>

        <div class="abo-praemien-block">
          <h4>{t.accountDash.aboPraemienVerfuegbarTitle}</h4>
          <p class="small" id="abo-keine-praemien">{t.accountDash.aboKeinePraemienVerfuegbar}</p>
          <div class="abo-praemien-row">
            <div class="abo-reward-ready" id="abo-einloesen-klein-wrap" style="display:none;">
              <span class="abo-reward-ready-icon" aria-hidden="true">🧸</span>
              <div class="abo-reward-ready-body">
                <strong>{t.accountDash.aboEinloesenKleinLabel}</strong>
                <button type="button" class="btn btn-primary btn-sm" id="abo-einloesen-klein" data-einloesen="klein">{t.accountDash.aboEinloesenBtn}</button>
              </div>
            </div>
            <div class="abo-reward-ready" id="abo-einloesen-gross-wrap" style="display:none;">
              <span class="abo-reward-ready-icon" aria-hidden="true">🧸</span>
              <div class="abo-reward-ready-body">
                <strong>{t.accountDash.aboEinloesenGrossLabel}</strong>
                <button type="button" class="btn btn-primary btn-sm" id="abo-einloesen-gross" data-einloesen="gross">{t.accountDash.aboEinloesenBtn}</button>
              </div>
            </div>
          </div>
          <p class="small" id="abo-eingeloest-hinweis" style="display:none; color: var(--c-accent);">{t.accountDash.aboEingeloestHinweis}</p>
        </div>

        <div class="abo-actions">
          <button type="button" class="btn btn-outline btn-sm" id="abo-zahlung-sim-btn">{t.accountDash.aboZahlungSimBtn}</button>
          <button type="button" class="btn btn-outline btn-sm abo-cancel-btn" id="abo-kuendigen-btn">{t.accountDash.aboKuendigenBtn}</button>
        </div>
        <p class="small loyalty-explainer">{t.accountDash.aboZahlungSimHinweis}</p>
      </div>

      <div class="card" id="abo-benachrichtigungen-card">
        <h3>{t.accountDash.aboBenachrichtigungenTitle}</h3>
        <ul class="abo-notif-list" id="abo-notif-list">
          <li class="small" id="abo-notif-empty">{t.accountDash.aboKeineBenachrichtigungen}</li>
        </ul>
      </div>

      <p class="small loyalty-explainer">{t.accountDash.aboExplainer}</p>
    </div>
  </section>
</Layout>

<script define:vars={{ loginPath: "/konto/", fallbackName: "Kundin", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge , invoiceLang: lang, invoiceLabels: { title: t.accountDash.invoiceTitle, numberLabel: t.accountDash.invoiceNumberLabel, dateLabel: t.accountDash.invoiceDateLabel, sellerLabel: t.accountDash.invoiceSellerLabel, billToLabel: t.accountDash.invoiceBillToLabel, itemLabel: t.accountDash.invoiceItemLabel, qtyLabel: t.accountDash.invoiceQtyLabel, unitPriceLabel: t.accountDash.invoiceUnitPriceLabel, sumLabel: t.accountDash.invoiceSumLabel, totalLabel: t.accountDash.orderTotal, vatNote: t.common.vatNote }, loyaltyProgressTemplate: t.accountDash.loyaltyProgressTemplate, loyaltyRemainingOne: t.accountDash.loyaltyRemainingOne, loyaltyRemainingOther: t.accountDash.loyaltyRemainingOther, loyaltyUnlockedTitle: t.accountDash.loyaltyUnlockedTitle, loyaltyUnlockedText: t.accountDash.loyaltyUnlockedText, aboLang: lang, aboLabels: { nameKlein: t.accountDash.aboNameKlein, nameMittel: t.accountDash.aboNameMittel, nameGross: t.accountDash.aboNameGross, preisSuffix: t.accountDash.aboPreisSuffix, monateSuffix: t.accountDash.aboMonateSuffix, fortschrittKleinTemplate: t.accountDash.aboFortschrittKleinTemplate, fortschrittGrossTemplate: t.accountDash.aboFortschrittGrossTemplate, praemienErhaltenTemplate: t.accountDash.aboPraemienErhaltenTemplate, aktivBadge: t.accountDash.aboAktivesLabel, nichtAktivBadge: t.accountDash.aboNichtAktivBadge, gekuendigtHinweisTemplate: t.accountDash.aboGekuendigtHinweisTemplate, kuendigenConfirm: t.accountDash.aboKuendigenConfirm, abschliessenBtn: t.accountDash.aboAbschliessenBtn, wechselnBtn: t.accountDash.aboWechselnBtn, nichtBuchbar: t.accountDash.aboNichtBuchbar, keineBenachrichtigungen: t.accountDash.aboKeineBenachrichtigungen, notifKeyLabels: { abo_abgeschlossen: t.accountDash.notifAboAbgeschlossen, abo_gewechselt: t.accountDash.notifAboGewechselt, abo_zahlung_erfolgreich: t.accountDash.notifAboZahlungErfolgreich, abo_teddy_klein_frei: t.accountDash.notifAboTeddyKleinFrei, abo_teddy_gross_frei: t.accountDash.notifAboTeddyGrossFrei, abo_bald_praemie: t.accountDash.notifAboBaldPraemie, abo_gekuendigt: t.accountDash.notifAboGekuendigt, abo_teddy_klein_eingeloest: t.accountDash.notifAboTeddyKleinEingeloest, abo_teddy_gross_eingeloest: t.accountDash.notifAboTeddyGrossEingeloest } } }}>
  window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText, invoiceLang, invoiceLabels, loyaltyProgressTemplate, loyaltyRemainingOne, loyaltyRemainingOther, loyaltyUnlockedTitle, loyaltyUnlockedText, aboLang, aboLabels };
</script>
<script>
  // Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
  // Rest aus (statt nur hinzuspringen). "Bestellungen" zeigt nur schon ANGEKOMMENE (abgeschlossene)
  // Bestellungen, "Offene Sendungen" nur die noch nicht angekommenen — echte Trennung statt
  // Überschneidung.
  const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
  const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
  const bestellungenSection = document.getElementById("bestellungen");
  const wunschlisteSection = document.getElementById("wunschliste");
  const recentSection = document.getElementById("zuletzt-angesehen");
  const datenSection = document.getElementById("meine-daten");
  const treuebonusSection = document.getElementById("treuebonus");
  const aboSection = document.getElementById("abo");
  const orderCards = Array.from(document.querySelectorAll(".order-card"));
  const emptyNote = document.getElementById("orders-empty-note") as HTMLElement | null;

  // Beim Laden ist noch KEIN Knopf gedrückt — solange nichts angeklickt wurde, steht direkt
  // "Zuletzt angesehen" da, alle anderen (per Tab umschaltbaren) Bereiche bleiben versteckt.
  function setActiveTab(tab: string | null) {
    navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));

    if (bestellungenSection) bestellungenSection.style.display = "none";
    if (wunschlisteSection) wunschlisteSection.style.display = "none";
    if (datenSection) datenSection.style.display = "none";
    if (treuebonusSection) treuebonusSection.style.display = "none";
    if (aboSection) aboSection.style.display = "none";
    if (recentSection) recentSection.style.display = "none";

    if (tab === null) {
      if (recentSection) recentSection.style.display = "";
      return;
    }

    if (tab === "wunschliste") {
      if (wunschlisteSection) wunschlisteSection.style.display = "";
      return;
    }

    if (tab === "daten") {
      if (datenSection) datenSection.style.display = "";
      return;
    }

    if (tab === "treuebonus") {
      if (treuebonusSection) treuebonusSection.style.display = "";
      return;
    }

    if (tab === "abo") {
      if (aboSection) aboSection.style.display = "";
      return;
    }

    if (bestellungenSection) bestellungenSection.style.display = "";
    let visibleCount = 0;
    orderCards.forEach((card) => {
      const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
      const show = tab === "offene" ? !!status : card.classList.contains("order-card-abgeschlossen");
      (card as HTMLElement).style.display = show ? "" : "none";
      if (show) visibleCount++;
    });
    if (emptyNote) {
      if (visibleCount === 0 && (tab === "offene" || tab === "bestellungen")) {
        emptyNote.textContent = tab === "offene" ? emptyNote.dataset.emptyOpen ?? "" : emptyNote.dataset.emptyArrived ?? "";
        emptyNote.style.display = "block";
      } else {
        emptyNote.style.display = "none";
      }
    }
  }

  navItems.forEach((item) => {
    item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
  });

  // Der "Meine Daten"-Button in der Kopfkarte springt direkt in den Profil-Bereich. Der Zugriff
  // aufs Abo läuft jetzt nur noch über die "Mein Abo"-Nav-Kachel weiter unten.
  document.getElementById("dash-daten-btn")?.addEventListener("click", () => {
    setActiveTab("daten");
    datenSection?.scrollIntoView({ behavior: "smooth", block: "start" });
  });

  // Deep-Link per URL-Hash (z.B. /konto/angemeldet/#abo) — springt direkt zum passenden Tab,
  // genutzt u.a. von der Vorschau-Seite /demo-abo/.
  const hashTab = location.hash.replace("#", "");
  const gueltigeHashTabs = ["bestellungen", "offene", "wunschliste", "daten", "treuebonus", "abo"];
  setActiveTab(gueltigeHashTabs.includes(hashTab) ? hashTab : null);
</script>
<script>
  import { getAccount, isLoggedIn, logout, setUsername, setPhoto, hatBestellungBewertet, anzeigeName, treueFortschritt, aboStatus, aboAbschliessen, aboZahlungSimulieren, aboKuendigen, teddyEinloesen } from "../../scripts/account";
  import { rechnungAlsPdfHerunterladen } from "../../scripts/invoice-pdf";
  import { fuegeTeddyGratisHinzu } from "../../scripts/cart";
  import { formatPrice } from "../../i18n/format";
  import { aboStufenKonfig } from "../../data/abo";
  const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText, invoiceLang, invoiceLabels, loyaltyProgressTemplate, loyaltyRemainingOne, loyaltyRemainingOther, loyaltyUnlockedTitle, loyaltyUnlockedText, aboLang, aboLabels } = (window as any).__accountDashVars;

  // Zugriffsschutz: diese Seite ist nur für angemeldete Kund:innen gedacht. Es gibt noch kein
  // echtes Backend, das den Zugriff serverseitig verweigern könnte (Phase 2) — deshalb hier per
  // JS geprüft und bei fehlender Anmeldung sofort zur Login-Seite weitergeleitet.
  if (!isLoggedIn()) {
    const note = document.getElementById("not-logged-in-note");
    const preview = document.getElementById("preview-note");
    if (note) note.style.display = "block";
    if (preview) preview.style.display = "none";
    setTimeout(() => { window.location.href = loginPath; }, 900);
  } else {
    function avatarHtml(username: string, photo: string): { bg: string; text: string } {
      if (photo) return { bg: `url(${photo})`, text: "" };
      return { bg: "", text: (username || "?").trim().charAt(0).toUpperCase() };
    }

    function renderProfil() {
      const a = getAccount();
      const greetingEl = document.getElementById("dash-greeting");
      if (greetingEl) greetingEl.textContent = greetingTemplate.replace("{name}", anzeigeName(a) || fallbackName);
      const emailEl = document.getElementById("profile-email");
      if (emailEl) emailEl.textContent = a.email || "–";
      const nameDisplay = document.getElementById("profile-name-display");
      if (nameDisplay) nameDisplay.textContent = a.name || "–";
      const usernameInput = document.getElementById("profile-username") as HTMLInputElement | null;
      if (usernameInput && document.activeElement !== usernameInput) usernameInput.value = a.username;

      const { bg, text } = avatarHtml(anzeigeName(a), a.photo);
      [document.getElementById("dash-avatar"), document.getElementById("profile-avatar")].forEach((el) => {
        if (!el) return;
        el.style.backgroundImage = bg;
        el.textContent = text;
      });
      // Empfängername in allen (schon gerenderten) Rechnungs-Dialogen live mit aktualisieren.
      document.querySelectorAll<HTMLElement>(".invoice-billto-name").forEach((el) => {
        el.textContent = anzeigeName(a) || fallbackName;
      });
    }
    renderProfil();
    window.addEventListener("account:changed", renderProfil);

    // Treuebonus: Fortschritt/Status live aus dem Konto rendern (Nav-Kachel + Inhaltsbereich).
    // Ist an ein aktives Abo gekoppelt (siehe treueFortschritt().gesperrt in account.ts) — ohne
    // aktives Abo zeigt die Karte nur den gesperrten Hinweis samt Sprung zum Abo-Bereich.
    function renderLoyalty() {
      const f = treueFortschritt(getAccount());
      const navValue = document.getElementById("loyalty-nav-value");
      if (navValue) navValue.textContent = f.gesperrt ? "🔒" : `${f.aktuelle}/${f.ziel}`;
      document.querySelector(".account-nav-loyalty")?.classList.toggle("is-ready", f.aktiv && !f.gesperrt);

      const lockedContent = document.getElementById("loyalty-locked-content");
      const unlockedContent = document.getElementById("loyalty-unlocked-content");
      if (lockedContent) lockedContent.style.display = f.gesperrt ? "flex" : "none";
      if (unlockedContent) unlockedContent.style.display = f.gesperrt ? "none" : "flex";
      if (f.gesperrt) return;

      const fill = document.getElementById("loyalty-bar-fill") as HTMLElement | null;
      if (fill) fill.style.width = `${Math.min(100, (f.aktuelle / f.ziel) * 100)}%`;

      const progressText = document.getElementById("loyalty-progress-text");
      if (progressText) {
        progressText.textContent = loyaltyProgressTemplate
          .replace("{cur}", String(f.aktuelle))
          .replace("{ziel}", String(f.ziel));
      }

      const statusText = document.getElementById("loyalty-status-text");
      const cartLink = document.getElementById("loyalty-cart-link") as HTMLElement | null;
      if (statusText) {
        if (f.aktiv) {
          statusText.innerHTML = `<strong>${loyaltyUnlockedTitle}</strong><br />${loyaltyUnlockedText}`;
          if (cartLink) cartLink.style.display = "inline-flex";
        } else {
          statusText.textContent = f.fehlende === 1 ? loyaltyRemainingOne : loyaltyRemainingOther.replace("{n}", String(f.fehlende));
          if (cartLink) cartLink.style.display = "none";
        }
      }
    }
    renderLoyalty();
    window.addEventListener("account:changed", renderLoyalty);

    // Im gesperrten Treuebonus-Zustand direkt zum Abo-Bereich springen.
    document.getElementById("loyalty-locked-abo-btn")?.addEventListener("click", () => {
      setActiveTab("abo");
      document.getElementById("abo")?.scrollIntoView({ behavior: "smooth", block: "start" });
    });

    // Abosystem: Pläne, Status, Fortschritt, Prämien und Benachrichtigungen live aus dem Konto
    // rendern (Nav-Kachel + Planvergleich + Statuskarte + Benachrichtigungsliste).
    const aboNameMap: Record<string, string> = { klein: aboLabels.nameKlein, mittel: aboLabels.nameMittel, gross: aboLabels.nameGross };
    // Icon + Farbkategorie je Benachrichtigungs-Typ — rein optisch, keine Übersetzung nötig
    // (die Schlüssel sind sprachneutrale Konstanten aus scripts/account.ts).
    const NOTIF_ICON: Record<string, string> = {
      abo_abgeschlossen: "🎉",
      abo_gewechselt: "🔄",
      abo_zahlung_erfolgreich: "✅",
      abo_teddy_klein_frei: "🧸",
      abo_teddy_gross_frei: "🧸",
      abo_bald_praemie: "⏳",
      abo_gekuendigt: "🚫",
      abo_teddy_klein_eingeloest: "🎁",
      abo_teddy_gross_eingeloest: "🎁",
    };
    const NOTIF_KATEGORIE: Record<string, string> = {
      abo_abgeschlossen: "erfolg",
      abo_gewechselt: "info",
      abo_zahlung_erfolgreich: "erfolg",
      abo_teddy_klein_frei: "praemie",
      abo_teddy_gross_frei: "praemie",
      abo_bald_praemie: "warnung",
      abo_gekuendigt: "abbruch",
      abo_teddy_klein_eingeloest: "praemie",
      abo_teddy_gross_eingeloest: "praemie",
    };

    function renderAbo() {
      const a = getAccount();
      const status = aboStatus(a);

      const navValue = document.getElementById("abo-nav-value");
      if (navValue) navValue.textContent = status.stufe ? (status.aktiv ? "✓" : "⏸") : "–";
      document.querySelector(".account-nav-abo")?.classList.toggle("is-ready", status.aktiv);

      // Planvergleichs-Karten: aktive Stufe markieren, Buttons entsprechend beschriften.
      document.querySelectorAll<HTMLElement>("[data-abo-plan]").forEach((card) => {
        const stufe = card.dataset.aboPlan;
        const isCurrent = status.stufe === stufe && !a.abo.gekuendigt;
        const badge = card.querySelector("[data-abo-active-badge]") as HTMLElement | null;
        if (badge) badge.style.display = isCurrent ? "" : "none";
        card.classList.toggle("is-current-plan", isCurrent);
        const buchbar = card.dataset.aboPlanAktiv !== "0";
        card.classList.toggle("is-not-bookable", !buchbar && !isCurrent);
        const btn = card.querySelector("[data-abo-choose]") as HTMLButtonElement | null;
        if (btn) {
          btn.disabled = isCurrent || (!buchbar && !isCurrent);
          btn.textContent = isCurrent
            ? aboLabels.aktivBadge
            : !buchbar
              ? aboLabels.nichtBuchbar
              : (status.stufe && status.aktiv && !a.abo.gekuendigt ? aboLabels.wechselnBtn : aboLabels.abschliessenBtn);
        }
      });

      const statusCard = document.getElementById("abo-status-card");
      if (!status.stufe) {
        if (statusCard) statusCard.style.display = "none";
        return;
      }
      if (statusCard) statusCard.style.display = "";

      const setText = (id: string, text: string) => { const el = document.getElementById(id); if (el) el.textContent = text; };
      setText("abo-field-stufe", aboNameMap[status.stufe] ?? status.stufe);
      setText("abo-field-preis", `${formatPrice(status.preis, aboLang)} ${aboLabels.preisSuffix}`);
      setText("abo-field-rabatt", `${status.rabattProzent} %`);
      setText("abo-field-start", a.abo.startDatum ?? "–");
      setText("abo-field-naechste", a.abo.gekuendigt ? "–" : (a.abo.bezahltBisDatum ?? "–"));
      setText("abo-field-laufzeit", `${status.bezahlteMonate} ${aboLabels.monateSuffix}`);

      const activeBadge = document.getElementById("abo-active-badge");
      if (activeBadge) {
        activeBadge.textContent = status.aktiv ? aboLabels.aktivBadge : aboLabels.nichtAktivBadge;
        activeBadge.className = "badge " + (status.aktiv ? "abo-badge-active" : "abo-badge-inactive");
      }

      // Echte Fortschrittsbalken statt reinem Text — Prozent ergibt sich aus dem admin-
      // konfigurierten Intervall (aboStufenKonfig) minus der noch fehlenden Monate.
      const stufenKonfig = aboStufenKonfig(status.stufe);
      const fortschrittKleinWrap = document.getElementById("abo-fortschritt-klein-wrap");
      if (fortschrittKleinWrap) {
        if (status.naechsterKleinIn != null && stufenKonfig.kleinIntervallMonate > 0) {
          fortschrittKleinWrap.style.display = "block";
          setText("abo-fortschritt-klein-text", aboLabels.fortschrittKleinTemplate.replace("{n}", String(status.naechsterKleinIn)));
          const pct = Math.min(100, Math.max(0, ((stufenKonfig.kleinIntervallMonate - status.naechsterKleinIn) / stufenKonfig.kleinIntervallMonate) * 100));
          const fill = document.getElementById("abo-fortschritt-klein-fill") as HTMLElement | null;
          if (fill) fill.style.width = `${pct}%`;
        } else fortschrittKleinWrap.style.display = "none";
      }
      const fortschrittGrossWrap = document.getElementById("abo-fortschritt-gross-wrap");
      if (fortschrittGrossWrap) {
        if (status.naechsterGrossIn != null && stufenKonfig.grossIntervallMonate > 0) {
          fortschrittGrossWrap.style.display = "block";
          setText("abo-fortschritt-gross-text", aboLabels.fortschrittGrossTemplate.replace("{n}", String(status.naechsterGrossIn)));
          const pct = Math.min(100, Math.max(0, ((stufenKonfig.grossIntervallMonate - status.naechsterGrossIn) / stufenKonfig.grossIntervallMonate) * 100));
          const fill = document.getElementById("abo-fortschritt-gross-fill") as HTMLElement | null;
          if (fill) fill.style.width = `${pct}%`;
        } else fortschrittGrossWrap.style.display = "none";
      }

      setText("abo-praemien-erhalten", aboLabels.praemienErhaltenTemplate
        .replace("{klein}", String(a.abo.kleinTeddyEingeloest))
        .replace("{gross}", String(a.abo.grossTeddyEingeloest)));

      const gekuendigtHinweis = document.getElementById("abo-gekuendigt-hinweis");
      if (gekuendigtHinweis) {
        if (a.abo.gekuendigt && a.abo.gekuendigtAm) {
          gekuendigtHinweis.style.display = "block";
          gekuendigtHinweis.textContent = aboLabels.gekuendigtHinweisTemplate.replace("{datum}", a.abo.gekuendigtAm);
        } else gekuendigtHinweis.style.display = "none";
      }

      const hasKlein = status.kleinVerfuegbar > 0;
      const hasGross = status.grossVerfuegbar > 0;
      const einloesenKleinWrap = document.getElementById("abo-einloesen-klein-wrap") as HTMLElement | null;
      const einloesenGrossWrap = document.getElementById("abo-einloesen-gross-wrap") as HTMLElement | null;
      const keinePraemien = document.getElementById("abo-keine-praemien") as HTMLElement | null;
      if (einloesenKleinWrap) einloesenKleinWrap.style.display = hasKlein ? "flex" : "none";
      if (einloesenGrossWrap) einloesenGrossWrap.style.display = hasGross ? "flex" : "none";
      if (keinePraemien) keinePraemien.style.display = hasKlein || hasGross ? "none" : "block";

      const kuendigenBtn = document.getElementById("abo-kuendigen-btn") as HTMLElement | null;
      if (kuendigenBtn) kuendigenBtn.style.display = a.abo.gekuendigt ? "none" : "inline-flex";

      const list = document.getElementById("abo-notif-list");
      if (list) {
        list.innerHTML = "";
        if (a.benachrichtigungen.length === 0) {
          const li = document.createElement("li");
          li.className = "small";
          li.id = "abo-notif-empty";
          li.textContent = aboLabels.keineBenachrichtigungen;
          list.appendChild(li);
        } else {
          a.benachrichtigungen.forEach((n) => {
            const li = document.createElement("li");
            const kategorie = NOTIF_KATEGORIE[n.key] ?? "info";
            li.className = `abo-notif-item abo-notif-${kategorie}` + (n.gelesen ? "" : " abo-notif-unread");
            let text = aboLabels.notifKeyLabels[n.key] ?? n.key;
            if (n.stufe) text = text.replace("{stufe}", aboNameMap[n.stufe] ?? n.stufe);
            li.innerHTML = `
              <span class="abo-notif-icon" aria-hidden="true">${NOTIF_ICON[n.key] ?? "🔔"}</span>
              <span class="abo-notif-body"><span class="abo-notif-text small">${text}</span><span class="abo-notif-date small">${n.datum}</span></span>
            `;
            list.appendChild(li);
          });
        }
      }
    }
    renderAbo();
    window.addEventListener("account:changed", renderAbo);

    document.querySelectorAll<HTMLButtonElement>("[data-abo-choose]").forEach((btn) => {
      btn.addEventListener("click", () => {
        const stufe = btn.dataset.aboChoose as "klein" | "mittel" | "gross" | undefined;
        if (!stufe) return;
        aboAbschliessen(stufe);
      });
    });

    document.getElementById("abo-zahlung-sim-btn")?.addEventListener("click", () => { aboZahlungSimulieren(); });

    document.getElementById("abo-kuendigen-btn")?.addEventListener("click", () => {
      if (window.confirm(aboLabels.kuendigenConfirm)) aboKuendigen();
    });

    document.querySelectorAll<HTMLButtonElement>("[data-einloesen]").forEach((btn) => {
      btn.addEventListener("click", () => {
        const art = btn.dataset.einloesen as "klein" | "gross" | undefined;
        if (!art) return;
        teddyEinloesen(art);
        fuegeTeddyGratisHinzu(art);
        const hinweis = document.getElementById("abo-eingeloest-hinweis");
        if (hinweis) {
          hinweis.style.display = "block";
          setTimeout(() => { hinweis.style.display = "none"; }, 2500);
        }
      });
    });

    // Benutzername ändern
    const saveBtn = document.getElementById("profile-username-save");
    const usernameInput = document.getElementById("profile-username") as HTMLInputElement | null;
    const savedStatus = document.getElementById("profile-username-status");
    saveBtn?.addEventListener("click", () => {
      if (!usernameInput?.value.trim()) return;
      setUsername(usernameInput.value);
      if (savedStatus) {
        savedStatus.style.display = "inline";
        setTimeout(() => { savedStatus.style.display = "none"; }, 2000);
      }
    });

    // Profilfoto hochladen (wird als data:-URL im localStorage abgelegt — reicht für diese
    // Demo völlig aus, in Phase 2 würde ein echter Datei-Upload an den Server dahinterstehen)
    const photoInput = document.getElementById("profile-photo-input") as HTMLInputElement | null;
    photoInput?.addEventListener("change", () => {
      const file = photoInput.files?.[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = () => setPhoto(String(reader.result));
      reader.readAsDataURL(file);
    });
    document.getElementById("profile-photo-remove")?.addEventListener("click", () => setPhoto(""));

    // Logout direkt aus dem Dashboard heraus
    document.getElementById("dash-logout-btn")?.addEventListener("click", () => {
      logout();
      window.location.href = loginPath;
    });

    // Rechnung direkt auf der Seite ansehen: natives <dialog> pro Bestellung, geöffnet/geschlossen
    // per Button — kein Download nötig, kein Verlassen der Seite.
    document.querySelectorAll<HTMLButtonElement>("[data-open-invoice]").forEach((btn) => {
      btn.addEventListener("click", () => {
        const id = btn.dataset.openInvoice;
        const dialog = id ? (document.getElementById(id) as HTMLDialogElement | null) : null;
        dialog?.showModal();
      });
    });

    // Rechnung als echte PDF-Datei herunterladen (siehe scripts/invoice-pdf.ts) — dieselben
    // Daten wie im "Rechnung ansehen"-Dialog, per dynamic import erst beim Klick nachgeladen.
    document.querySelectorAll<HTMLButtonElement>("[data-download-invoice]").forEach((btn) => {
      btn.addEventListener("click", async () => {
        const artikel = JSON.parse(btn.dataset.invoiceArtikel || "[]");
        btn.disabled = true;
        btn.textContent = btn.dataset.labelLoading || "…";
        try {
          await rechnungAlsPdfHerunterladen({
            nummer: btn.dataset.downloadInvoice || "",
            datum: btn.dataset.invoiceDatum || "",
            summe: Number(btn.dataset.invoiceSumme || 0),
            artikel,
            empfaenger: anzeigeName(getAccount()) || fallbackName,
            lang: invoiceLang,
            labels: invoiceLabels,
          });
        } finally {
          btn.disabled = false;
          btn.textContent = btn.dataset.labelDefault || "";
        }
      });
    });
    document.querySelectorAll<HTMLDialogElement>(".invoice-dialog").forEach((dialog) => {
      dialog.querySelectorAll<HTMLButtonElement>("[data-close-invoice]").forEach((btn) => {
        btn.addEventListener("click", () => dialog.close());
      });
      // Klick auf den abgedunkelten Hintergrund schließt den Dialog ebenfalls.
      dialog.addEventListener("click", (e) => {
        if (e.target === dialog) dialog.close();
      });
    });

    // Pro Bestellposition: Button "Rezension schreiben" durch "✓ Bewertet" ersetzen, sobald für
    // genau diese Bestellung+Produkt schon eine Rezension existiert (siehe scripts/reviews.ts,
    // wird beim Absenden des Formulars auf der Produktseite markiert).
    document.querySelectorAll<HTMLElement>("[data-order-review]").forEach((el) => {
      const bestellnummer = el.dataset.bestellnummer!;
      const slug = el.dataset.slug!;
      if (hatBestellungBewertet(bestellnummer, slug)) {
        el.innerHTML = "";
        const badge = document.createElement("span");
        badge.className = "badge review-done-badge";
        badge.textContent = reviewedBadgeText;
        el.appendChild(badge);
      }
    });
  }
</script>