---
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";

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;

// "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>
        <button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
      </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-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-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-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-data" data-tab="daten">
          <span class="account-nav-sparkle" aria-hidden="true">✨</span>
          <span class="account-nav-icon" aria-hidden="true">👤</span>
          <span class="account-nav-label">{t.accountDash.statData}</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>
                <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">
        <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>
</Layout>

<script define:vars={{ loginPath: "/konto/", fallbackName: "Kundin", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge }}>
  window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText };
</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 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 (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 (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); });
  });

  setActiveTab(null);
</script>
<script>
  import { getAccount, isLoggedIn, logout, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../scripts/account";
  const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText } = (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);

    // 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();
      });
    });
    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>