import {
  STEPS,
  listProducts,
  isFollowups,
  isInvitation,
  isPostcardLike,
  supportsMotif,
  calcEffectiveEnvelopeType,
  extractPlaceholders,
  normalizePlaceholderName,
  validateStep,
  getAvailableProductsForCustomerType,
} from "./configurator-state.js?ver=0.3.0";

import {
  calculatePricePerPiece,
  calculateFollowupBasePricePerPiece,
  formatPrice,
  calculateFollowupPricing,
  calculateDirectShippingPrices,
  formatEUR as fmtEUR,
} from "./configurator-pricing.js";

import BackendIntegration from "./configurator-backend-integration.js";

/* Persistenz */
const LS_KEY = "skrift.configurator.v2";
let hydratedForProductKey = null;

// Globaler State-Tracker für Modals
let currentGlobalState = null;

// Registry für Tabellen-Save-Funktionen (für flush vor Navigation)
const tableSaveRegistry = new Set();

/**
 * Registriert eine Save-Funktion für eine Tabelle
 * @param {Function} saveFn - Funktion zum Speichern der lokalen Änderungen
 * @returns {Function} - Unregister-Funktion
 */
function registerTableSave(saveFn) {
  tableSaveRegistry.add(saveFn);
  return () => tableSaveRegistry.delete(saveFn);
}

/**
 * Speichert alle registrierten Tabellen (lokale Änderungen -> State)
 * Wird vor Navigation und bei Page Leave aufgerufen
 */
export function flushAllTables() {
  tableSaveRegistry.forEach((saveFn) => {
    try {
      saveFn();
    } catch (e) {
      console.warn("[UI] Error flushing table:", e);
    }
  });
}

// Performante Persistenz: Nur periodisch + bei Page Leave
let persistDirty = false;
let persistInterval = null;
const PERSIST_INTERVAL_MS = 60000; // 1 Minute

function markPersistDirty() {
  persistDirty = true;
}

function flushPersistIfDirty() {
  if (persistDirty && currentGlobalState) {
    writePersistedNow(currentGlobalState);
    persistDirty = false;
  }
}

function startPersistInterval() {
  if (persistInterval) return;
  persistInterval = setInterval(flushPersistIfDirty, PERSIST_INTERVAL_MS);

  // Page Leave Detection: beforeunload, visibilitychange, pagehide
  window.addEventListener("beforeunload", flushPersistIfDirty);
  window.addEventListener("pagehide", flushPersistIfDirty);
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
      flushPersistIfDirty();
    }
  });
}

function stopPersistInterval() {
  if (persistInterval) {
    clearInterval(persistInterval);
    persistInterval = null;
  }
}

// ========== Validierungs-Overlay und Overflow-Warnung ==========

/**
 * Zeigt Lade-Overlay während der Textvalidierung
 */
export function showValidationOverlay() {
  // Entferne vorhandenes Overlay
  hideValidationOverlay();

  const overlay = document.createElement("div");
  overlay.id = "sk-validation-overlay";
  overlay.className = "sk-validation-overlay";
  overlay.innerHTML = `
    <div class="sk-validation-spinner"></div>
    <div class="sk-validation-text">Text wird geprüft...</div>
  `;
  document.body.appendChild(overlay);
}

/**
 * Versteckt das Lade-Overlay
 */
export function hideValidationOverlay() {
  const overlay = document.getElementById("sk-validation-overlay");
  if (overlay) {
    overlay.remove();
  }
}

/**
 * Zeigt Overflow-Warnung mit betroffenen Briefen
 * @param {Array} overflowFiles - Array von { index, lineCount, lineLimit }
 * @param {HTMLElement} container - Container für die Warnung
 */
export function showOverflowWarning(overflowFiles, container) {
  // Entferne vorherige Warnung
  hideOverflowWarning(container);

  if (!overflowFiles || overflowFiles.length === 0) return;

  const warning = document.createElement("div");
  warning.className = "sk-overflow-warning";
  warning.id = "sk-overflow-warning";

  // Max 10 Fehler anzeigen
  const maxDisplay = 10;
  const displayFiles = overflowFiles.slice(0, maxDisplay);
  const remaining = overflowFiles.length - maxDisplay;

  const itemsHtml = displayFiles
    .map((f) => {
      // Zeige Tabellenzeile (index + 1 für 1-basierte Anzeige)
      const rowNumber = f.index + 1;
      return `
      <li class="sk-overflow-warning-item">
        <span class="sk-overflow-warning-name">Empfänger in Tabellenzeile ${rowNumber}</span>
        <span class="sk-overflow-warning-lines">${f.lineCount} / ${f.lineLimit} Zeilen</span>
      </li>
    `;
    })
    .join("");

  // "und X weitere" Hinweis
  const remainingHtml =
    remaining > 0
      ? `<li class="sk-overflow-warning-item sk-overflow-warning-more">
        <span class="sk-overflow-warning-name">... und ${remaining} weitere Empfänger</span>
        <span class="sk-overflow-warning-lines"></span>
      </li>`
      : "";

  warning.innerHTML = `
    <div class="sk-overflow-warning-title">
      Text zu lang für das gewählte Format
    </div>
    <ul class="sk-overflow-warning-list">
      ${itemsHtml}
      ${remainingHtml}
    </ul>
    <p class="sk-overflow-warning-hint">
      Bitte kürzen Sie den Text oder reduzieren Sie die Zeilenanzahl, um fortzufahren.
      Die Zeilennummern beziehen sich auf die Empfänger-/Platzhaltertabelle.
    </p>
  `;

  // Am Anfang des Containers einfügen
  container.insertBefore(warning, container.firstChild);

  // Scroll zur Warnung
  warning.scrollIntoView({ behavior: "smooth", block: "start" });
}

/**
 * Versteckt die Overflow-Warnung
 */
export function hideOverflowWarning(container) {
  const warning = container?.querySelector("#sk-overflow-warning");
  if (warning) {
    warning.remove();
  }
}

/**
 * Zeigt eine Validierungs-Fehlermeldung an
 * @param {string} message - Fehlermeldung
 * @param {HTMLElement} container - Container für die Meldung
 */
export function showValidationError(message, container) {
  // Entferne vorherige Fehlermeldungen
  hideValidationError(container);
  hideOverflowWarning(container);

  const errorDiv = document.createElement("div");
  errorDiv.className = "sk-validation-error";
  errorDiv.id = "sk-validation-error";

  errorDiv.innerHTML = `
    <div class="sk-validation-error-title">
      Validierung nicht möglich
    </div>
    <p class="sk-validation-error-message">${escapeHtml(message)}</p>
    <p class="sk-validation-error-hint">
      Bitte laden Sie die Seite neu und versuchen Sie es erneut.
    </p>
  `;

  // Am Anfang des Containers einfügen
  container.insertBefore(errorDiv, container.firstChild);

  // Scroll zur Meldung
  errorDiv.scrollIntoView({ behavior: "smooth", block: "start" });
}

/**
 * Versteckt die Validierungs-Fehlermeldung
 */
export function hideValidationError(container) {
  const error = container?.querySelector("#sk-validation-error");
  if (error) {
    error.remove();
  }
}

/**
 * HTML escaping für sichere Ausgabe
 */
function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

// Preview-Generierung Funktionen
// Alte Preview-Funktionen entfernt - jetzt wird PreviewManager verwendet

// Preview-Funktionen verwenden jetzt PreviewManager

function readPersisted() {
  try {
    const raw = localStorage.getItem(LS_KEY);
    if (!raw) return null;
    const data = JSON.parse(raw);
    if (!data || typeof data !== "object") return null;
    return data;
  } catch {
    return null;
  }
}

// Sofortige Speicherung (intern verwendet)
function writePersistedNow(state) {
  try {
    const productKey = state?.ctx?.product?.key || null;
    // Auch ohne Produktauswahl speichern, wenn customerType gesetzt ist
    if (!productKey && !state.answers.customerType) return;

    // Order-Daten OHNE AGB/Datenschutz speichern (müssen immer neu bestätigt werden)
    const orderWithoutConsent = { ...(state.order || {}) };
    delete orderWithoutConsent.acceptedAgb;
    delete orderWithoutConsent.acceptedPrivacy;

    const payload = {
      productKey,
      answers: state.answers || {},
      recipientRows: Array.isArray(state.recipientRows)
        ? state.recipientRows
        : [],
      addressMode: state.addressMode || "classic",
      freeAddressRows: Array.isArray(state.freeAddressRows)
        ? state.freeAddressRows
        : [],
      placeholderValues: state.placeholderValues || {},
      order: orderWithoutConsent,
      step: state.step || 0,
      history: state.history || [],
    };
    localStorage.setItem(LS_KEY, JSON.stringify(payload));
  } catch {}
}

// Markiert State als dirty - Speicherung erfolgt periodisch oder bei Page Leave
function writePersisted(state) {
  markPersistDirty();
}

function hydrateIfPossible(state, dispatch) {
  // Nur EINMAL hydrieren - beim ersten Laden
  if (hydratedForProductKey !== null) return false;

  // Flag SOFORT setzen um Mehrfachausführung zu verhindern
  hydratedForProductKey = "done";

  const productKey = state?.ctx?.product?.key || null;
  const saved = readPersisted();

  if (!saved) return false;

  // Wenn ein Produkt ausgewählt ist, nur hydrieren wenn es übereinstimmt
  if (productKey && saved.productKey !== productKey) return false;

  // URL-Parameter haben Vorrang
  const urlQuantity = state?.ctx?.quantity || null;
  const urlFormat = state?.ctx?.format || null;

  // EINEN großen HYDRATE dispatch statt vieler kleiner
  dispatch({
    type: "HYDRATE_ALL",
    payload: {
      productKey: !productKey && saved.productKey ? saved.productKey : null,
      answers: saved.answers || {},
      recipientRows: saved.recipientRows || null,
      addressMode: saved.addressMode || null,
      freeAddressRows: saved.freeAddressRows || null,
      placeholderValues: saved.placeholderValues || null,
      order: saved.order || null,
      step: saved.step,
      urlQuantity,
      urlFormat,
      currentStep: state.step,
    },
  });

  return true; // Hydration wurde durchgeführt, neuer Render wurde ausgelöst
}

/* DOM helper */
function h(tag, attrs = {}, children = []) {
  const el = document.createElement(tag);

  for (const [k, v] of Object.entries(attrs || {})) {
    if (k === "class") {
      el.className = v;
      continue;
    }

    if (k === "text") {
      el.textContent = v;
      continue;
    }

    if (k.startsWith("on") && typeof v === "function") {
      el.addEventListener(k.slice(2), v);
      continue;
    }

    if (
      k === "value" &&
      (tag === "input" || tag === "textarea" || tag === "select")
    ) {
      el.value = v ?? "";
      continue;
    }
    if (k === "checked" && tag === "input") {
      el.checked = !!v;
      continue;
    }
    if (k === "disabled") {
      el.disabled = !!v;
      continue;
    }
    if (k === "selected" && tag === "option") {
      el.selected = !!v;
      continue;
    }

    if (v === true) el.setAttribute(k, "");
    else if (v !== false && v != null) el.setAttribute(k, String(v));
  }

  for (const c of children)
    el.appendChild(typeof c === "string" ? document.createTextNode(c) : c);
  return el;
}

function clear(el) {
  if (!el) return;
  while (el.firstChild) el.removeChild(el.firstChild);
}

/* Fokus Erhalt */
function captureFocus(dom) {
  const a = document.activeElement;
  if (!a || !dom.form || !dom.form.contains(a)) return null;

  const key = a.getAttribute("data-sk-focus");
  if (!key) return null;

  const start = typeof a.selectionStart === "number" ? a.selectionStart : null;
  const end = typeof a.selectionEnd === "number" ? a.selectionEnd : null;

  // Scroll-Position des Textfelds speichern
  const scrollTop = typeof a.scrollTop === "number" ? a.scrollTop : null;
  const scrollLeft = typeof a.scrollLeft === "number" ? a.scrollLeft : null;

  return { key, start, end, scrollTop, scrollLeft };
}

function restoreFocus(dom, snapshot) {
  if (!snapshot) return;

  const el = dom.form.querySelector(`[data-sk-focus="${snapshot.key}"]`);
  if (!el) return;

  el.focus({ preventScroll: true });

  if (
    snapshot.start != null &&
    snapshot.end != null &&
    typeof el.setSelectionRange === "function"
  ) {
    try {
      el.setSelectionRange(snapshot.start, snapshot.end);
    } catch {}
  }

  // Scroll-Position des Textfelds wiederherstellen
  if (snapshot.scrollTop != null) {
    el.scrollTop = snapshot.scrollTop;
  }
  if (snapshot.scrollLeft != null) {
    el.scrollLeft = snapshot.scrollLeft;
  }
}

/* Utils */
// fmtEUR is now imported from configurator-pricing.js

function stepTitle(step) {
  switch (step) {
    case STEPS.PRODUCT:
      return "Produkt";
    case STEPS.QUANTITY:
      return "Allgemein";
    case STEPS.ENVELOPE:
      return "Umschlag";
    case STEPS.CONTENT:
      return "Inhalt";
    case STEPS.CUSTOMER_DATA:
      return "Kundendaten";
    case STEPS.REVIEW:
      return "Prüfen";
    default:
      return "";
  }
}

/**
 * Rendert einen Link zu den Schriftbeispielen (öffnet in neuem Tab)
 */
function renderFontSampleLink() {
  const fontSampleUrl =
    window.SkriftConfigurator?.settings?.font_sample?.url || "";
  if (!fontSampleUrl) return null;

  return h("div", { class: "sk-help", style: "margin-top: 8px;" }, [
    h("a", {
      href: fontSampleUrl,
      target: "_blank",
      rel: "noopener noreferrer",
      style: "color: #0073aa; text-decoration: underline;",
      text: "Schriftbeispiele ansehen →",
    }),
  ]);
}

/**
 * Rendert Platzhalter-Hilfetext mit optionalem Link zur Hilfeseite
 * @param {string[]} hints - Zusätzliche Hinweise (optional)
 */
function renderPlaceholderHelpText(hints = []) {
  const helpUrl =
    window.SkriftConfigurator?.settings?.font_sample?.placeholder_help_url ||
    "";

  const elements = [
    document.createTextNode(
      "Sie können Platzhalter verwenden, um dynamische Inhalte einzufügen. Platzhalter werden in doppelten eckigen Klammern geschrieben (z.B. ",
    ),
    h("code", { text: "[[vorname]]" }),
    document.createTextNode(" oder "),
    h("code", { text: "[[firma]]" }),
    document.createTextNode(
      "). Diese werden später durch die tatsächlichen Werte ersetzt.",
    ),
  ];

  // Hints hinzufügen
  if (hints.length > 0) {
    elements.push(document.createTextNode(" | " + hints.join(" | ")));
  }

  // Link hinzufügen
  if (helpUrl) {
    elements.push(document.createTextNode(" "));
    elements.push(
      h("a", {
        href: helpUrl,
        target: "_blank",
        rel: "noopener noreferrer",
        style: "color: #0073aa; text-decoration: underline;",
        text: "Mehr erfahren →",
      }),
    );
  }

  return h("div", { class: "sk-help" }, elements);
}

function renderCard(title, subtitle, bodyNodes = [], footerNodes = []) {
  const card = h("div", { class: "sk-card" }, []);

  if (title) {
    const head = h("div", { class: "sk-card-head" }, [
      h("h3", { class: "sk-card-title", text: title }),
    ]);
    if (subtitle) {
      head.appendChild(h("div", { class: "sk-card-subtitle", text: subtitle }));
    }
    card.appendChild(head);
  }

  card.appendChild(h("div", { class: "sk-card-body" }, bodyNodes));

  if (footerNodes && footerNodes.length) {
    card.appendChild(h("div", { class: "sk-card-foot" }, footerNodes));
  }

  return card;
}

function renderStepper(stepperEl, state, dispatch) {
  clear(stepperEl);

  const steps = [
    { id: STEPS.PRODUCT, label: "Produkt", icon: "📦" },
    { id: STEPS.QUANTITY, label: "Allgemein", icon: "⚙️" },
    { id: STEPS.ENVELOPE, label: "Umschlag", icon: "✉️" },
    { id: STEPS.CONTENT, label: "Inhalt", icon: "✍️" },
    { id: STEPS.CUSTOMER_DATA, label: "Kundendaten", icon: "📋" },
    { id: STEPS.REVIEW, label: "Prüfen", icon: "✓" },
  ];

  const stepperContent = h("div", { class: "sk-stepper" }, []);

  for (let i = 0; i < steps.length; i++) {
    const s = steps[i];
    const isActive = state.step === s.id;
    const isComplete = s.id < state.step;
    const canJumpBack = s.id <= state.step;

    // Button Content: Häkchen-Icon für erledigte Steps
    const btnChildren = [];
    if (isComplete) {
      btnChildren.push(h("span", { class: "sk-chip-check", text: "✓" }));
    }
    btnChildren.push(s.label);

    const btn = h(
      "button",
      {
        type: "button",
        class: `sk-chip ${isActive ? "is-active" : ""} ${
          isComplete ? "is-complete" : ""
        }`,
        disabled: !canJumpBack,
        onclick: () => dispatch({ type: "SET_STEP", step: s.id }),
      },
      btnChildren,
    );
    stepperContent.appendChild(btn);

    // Pfeil nach jedem Step außer dem letzten (dünner Chevron-Pfeil)
    if (i < steps.length - 1) {
      stepperContent.appendChild(
        h("span", { class: "sk-stepper-arrow", text: "›" }),
      );
    }
  }

  // Stepper in Card integrieren (ohne Titel)
  const card = renderCard(null, null, [stepperContent]);
  stepperEl.appendChild(card);

  // Mobile: Auto-Scroll zum aktiven Step
  requestAnimationFrame(() => {
    const activeChip = stepperContent.querySelector(".sk-chip.is-active");
    if (activeChip && stepperContent) {
      // Prüfe ob wir auf einem mobilen Gerät sind (stepper ist horizontal scrollbar)
      const isMobile = window.innerWidth <= 640;

      if (isMobile) {
        // Berechne die Scroll-Position um den aktiven Chip zu zentrieren
        const containerWidth = stepperContent.offsetWidth;
        const chipLeft = activeChip.offsetLeft;
        const chipWidth = activeChip.offsetWidth;
        const scrollLeft = chipLeft - containerWidth / 2 + chipWidth / 2;

        stepperContent.scrollTo({
          left: Math.max(0, scrollLeft),
          behavior: "smooth",
        });
      } else {
        // Desktop: Standard scrollIntoView
        activeChip.scrollIntoView({
          behavior: "smooth",
          block: "nearest",
          inline: "center",
        });
      }
    }
  });
}

function renderTopbar(dom, state) {
  clear(dom.topbar);

  const q = state.quote || {};
  const isB2B = state.answers?.customerType === "business";
  const isFU = isFollowups(state);

  let priceText = "bitte Produkt wählen";
  let priceNote = "";

  if (isFU) {
    // Follow-ups: Zeige "Ab-Preis" OHNE Multiplikator und OHNE Einmalkosten (nur pro Stück)
    const basePrice = calculateFollowupBasePricePerPiece(state);
    if (basePrice > 0) {
      const formatted = formatPrice(basePrice, state);
      priceText = "ab " + formatted.display;
      priceNote = isB2B ? "zzgl. MwSt. pro Stück" : "inkl. MwSt. pro Stück";
    } else {
      priceText = "ab auf Anfrage";
      priceNote = "";
    }
  } else if (state.answers.quantity > 0 && state.ctx?.product) {
    // Standard-Produkte: Zeige "ab" + Preis pro Stück
    const product = state.ctx.product;
    const prices = window.SkriftConfigurator?.settings?.prices || {};
    const taxRate = (prices.tax_rate || 19) / 100;

    // Im Product- und Quantity-Step: Nur dynamischer Mengenpreis (Basispreis × Multiplikator)
    // Keine zusätzlichen Kosten (A4, Motiv, Versand) einberechnen
    const isEarlyStep =
      state.step === STEPS.PRODUCT || state.step === STEPS.QUANTITY;

    if (isEarlyStep) {
      // Nur Basispreis × dynamische Mengenformel
      const basePrice = product.basePrice || 0;
      const dynamicPricing =
        window.SkriftConfigurator?.settings?.dynamic_pricing || {};
      const formula = isB2B
        ? dynamicPricing.business_formula || "1"
        : dynamicPricing.private_formula || "1";

      const qty = Number(state.answers.quantity) || 1;
      const normalQty = isB2B
        ? dynamicPricing.business_normal_quantity || 200
        : dynamicPricing.private_normal_quantity || 50;
      const minQty = isB2B
        ? dynamicPricing.business_min_quantity || 50
        : dynamicPricing.private_min_quantity || 10;

      // Formel auswerten
      let multiplier = 1;
      try {
        const formulaWithValues = formula
          .replace(/%qty%/g, qty)
          .replace(/%norm_b%/g, dynamicPricing.business_normal_quantity || 200)
          .replace(/%mind_b%/g, dynamicPricing.business_min_quantity || 50)
          .replace(/%norm_p%/g, dynamicPricing.private_normal_quantity || 50)
          .replace(/%mind_p%/g, dynamicPricing.private_min_quantity || 10);
        multiplier = eval(formulaWithValues);
        if (isNaN(multiplier) || multiplier < 1) multiplier = 1;
      } catch (e) {
        multiplier = 1;
      }

      const priceNet = basePrice * multiplier;
      const priceGross = priceNet * (1 + taxRate);
      const displayPrice = isB2B
        ? Math.round(priceNet * 100) / 100
        : Math.round(priceGross * 100) / 100;

      priceText = "ab " + fmtEUR(displayPrice);
      priceNote = isB2B ? "zzgl. MwSt. pro Stück" : "inkl. MwSt. pro Stück";
    } else {
      // Ab Envelope-Step: Vollständige Preisberechnung inkl. aller Optionen
      // calculatePricePerPiece verwendet bereits immer den Inlandspreis
      const pricePerPiece = calculatePricePerPiece(state);

      if (pricePerPiece > 0) {
        const formatted = formatPrice(pricePerPiece, state);
        priceText = "ab " + formatted.display;
        priceNote = isB2B ? "zzgl. MwSt. pro Stück" : "inkl. MwSt. pro Stück";
      }
    }
  }

  const priceSection = h("div", { class: "sk-price" }, [
    h("div", { class: "sk-price-label", text: "Ihr Preis" }),
    h("div", {
      class: "sk-price-value",
      text: priceText,
    }),
    h("div", { class: "sk-price-note", text: priceNote }),
  ]);

  const productInfo = h("div", { class: "sk-product-info" }, []);

  if (state?.ctx?.product) {
    productInfo.appendChild(
      h("div", { class: "sk-product-icon", text: state.ctx.product.label[0] }),
    );
    productInfo.appendChild(
      h("div", {}, [
        h("div", { class: "sk-product-label", text: state.ctx.product.label }),
        h("div", {
          class: "sk-text-small sk-text-muted",
          text: stepTitle(state.step),
        }),
      ]),
    );
  }

  dom.topbar.appendChild(priceSection);
  dom.topbar.appendChild(productInfo);
}

/* STEP RENDERERS */

// Step 1: Produkt (Kundentyp + Produktauswahl kombiniert)
function renderProductStep(state, dispatch) {
  const blocks = [];

  // Kundentyp Auswahl
  const customerOptions = [
    {
      value: "business",
      label: "Geschäftskunde",
      desc: "Für Unternehmen, Selbstständige und gewerbliche Kunden",
      icon: "🏢",
    },
    {
      value: "private",
      label: "Privatkunde",
      desc: "Für private Anlässe und persönliche Korrespondenz",
      icon: "🏠",
    },
  ];

  const customerBody = customerOptions.map((opt) =>
    h(
      "div",
      {
        class: `sk-option ${
          state.answers.customerType === opt.value ? "is-selected" : ""
        }`,
        onclick: () =>
          dispatch({ type: "SET_CUSTOMER_TYPE", customerType: opt.value }),
      },
      [
        h("input", {
          type: "radio",
          name: "customerType",
          checked: state.answers.customerType === opt.value,
          onchange: () => {},
        }),
        h("div", { class: "sk-option-content" }, [
          h("div", {
            class: "sk-option-label",
            text: `${opt.icon} ${opt.label}`,
          }),
          h("div", { class: "sk-option-desc", text: opt.desc }),
        ]),
      ],
    ),
  );

  blocks.push(
    renderCard(
      "Als was möchten Sie einkaufen?",
      "Wählen Sie Ihren Kundentyp aus",
      [h("div", { class: "sk-options" }, customerBody)],
    ),
  );

  // Produktauswahl (nur wenn Kundentyp gewählt)
  if (state.answers.customerType) {
    const products = getAvailableProductsForCustomerType(
      state.answers.customerType,
    );

    const grid = h("div", { class: "sk-selection-grid" }, []);
    for (const p of products) {
      const isSelected = state?.ctx?.product?.key === p.key;

      // Preisberechnung für Anzeige: Nur Basispreis (ohne Versand, Optionen etc.)
      let displayPrice = p.basePrice || 2.5;

      // MwSt. aufschlagen (nur für Privatkunden)
      const isBusinessCustomer = state.answers?.customerType === "business";
      const prices = window.SkriftConfigurator?.settings?.prices || {};
      const taxRate = (prices.tax_rate || 19) / 100;

      // Business: Nettopreis, Privat: Bruttopreis
      const finalPrice = isBusinessCustomer
        ? displayPrice
        : displayPrice * (1 + taxRate);

      const priceText = `ab ${fmtEUR(finalPrice)}`;
      const descText =
        p.description || "Professionelle handgeschriebene Korrespondenz";

      const card = h(
        "div",
        {
          class: `sk-selection-card ${isSelected ? "is-selected" : ""}`,
          onclick: () => dispatch({ type: "SET_PRODUCT", product: p }),
        },
        [
          h("div", { class: "sk-selection-card-image" }, [
            h("div", { text: "📄", style: "font-size: 48px" }), // Placeholder
          ]),
          h("div", { class: "sk-selection-card-content" }, [
            h("div", { class: "sk-selection-card-title", text: p.label }),
            h("div", { class: "sk-selection-card-price", text: priceText }),
            h("div", {
              class: "sk-selection-card-desc",
              text: descText,
            }),
          ]),
        ],
      );
      grid.appendChild(card);
    }

    blocks.push(
      renderCard(
        "Welches Produkt benötigen Sie?",
        "Wählen Sie das passende Produkt für Ihren Bedarf",
        [grid],
      ),
    );
  }

  return h("div", { class: "sk-stack" }, blocks);
}

// Step 3: Menge & Format
function renderQuantityStep(state, dispatch) {
  const blocks = [];

  // Mengenabfrage (für normale Produkte)
  if (!isFollowups(state)) {
    // Mindestmenge ermitteln (bei noLimits = 1)
    const dynamicPricing =
      window.SkriftConfigurator?.settings?.dynamic_pricing || {};
    const isB2B = state.answers?.customerType === "business";
    const noLimits = state.noLimits || false;

    const minQuantity = noLimits
      ? 1
      : isB2B
        ? dynamicPricing.business_min_quantity || 50
        : dynamicPricing.private_min_quantity || 10;

    const normalQuantity = isB2B
      ? dynamicPricing.business_normal_quantity || 200
      : dynamicPricing.private_normal_quantity || 50;

    // Standardmenge auf beste Preismenge setzen (normalQuantity statt minQuantity)
    const currentQty = state.answers.quantity || normalQuantity;
    const isBelow = currentQty < minQuantity;

    // Erstelle Input-Element mit manuellem Value-Management
    const inputEl = h("input", {
      class: `sk-input ${isBelow ? "sk-input-error" : ""}`,
      type: "number",
      min: String(minQuantity),
      "data-sk-focus": "quantity.amount",
      onchange: (e) => {
        // Update state nur bei change (Enter oder Blur)
        const val =
          e.target.value === "" ? minQuantity : Number(e.target.value);
        const finalVal = isNaN(val) || val < minQuantity ? minQuantity : val;
        e.target.value = String(finalVal);
        // Nur dispatchen wenn sich der Wert geändert hat
        if (finalVal !== state.answers.quantity) {
          dispatch({
            type: "ANSWER",
            patch: { quantity: finalVal },
          });
        }
      },
    });

    // Setze initialen Wert manuell
    inputEl.value = String(currentQty);

    const quantityInput = [inputEl];

    // Fehlermeldung bei Unterschreitung
    if (isBelow) {
      quantityInput.push(
        h("div", {
          class: "sk-error-message",
          style: "color: #d32f2f; margin-top: 8px; font-size: 14px;",
          text: `Mindestmenge: ${minQuantity} Stück`,
        }),
      );
    }

    // Beschreibungstext je nach noLimits-Modus
    const quantityDescription = noLimits
      ? `Unser bester Preis gilt ab ${normalQuantity} Stück`
      : `Mindestmenge: ${minQuantity} Stück • Unser bester Preis gilt ab ${normalQuantity} Stück`;

    blocks.push(
      renderCard(
        "Wie viele Schriftstücke benötigen Sie?",
        quantityDescription,
        quantityInput,
      ),
    );
  }

  // Follow-ups: Jahresvolumen
  if (isFollowups(state)) {
    const volumes = [
      { value: "5-49", label: "5-49 Follow-ups pro Monat" },
      { value: "50-199", label: "50-199 Follow-ups pro Monat" },
      { value: "200-499", label: "200-499 Follow-ups pro Monat" },
      { value: "500-999", label: "500-999 Follow-ups pro Monat" },
      { value: "1000+", label: "1000+ Follow-ups pro Monat" },
    ];

    const volBody = volumes.map((vol) =>
      h(
        "div",
        {
          class: `sk-option ${
            state.answers.followupYearlyVolume === vol.value
              ? "is-selected"
              : ""
          }`,
          onclick: () =>
            dispatch({
              type: "ANSWER",
              patch: { followupYearlyVolume: vol.value },
            }),
        },
        [
          h("input", {
            type: "radio",
            name: "volume",
            checked: state.answers.followupYearlyVolume === vol.value,
            onchange: () => {},
          }),
          h("div", { class: "sk-option-content" }, [
            h("div", { class: "sk-option-label", text: vol.label }),
          ]),
        ],
      ),
    );

    blocks.push(
      renderCard(
        "Um wie viele Follow-ups geht es ca. pro Monat?",
        "Dies hilft uns bei der Preiskalkulation",
        [h("div", { class: "sk-options" }, volBody)],
      ),
    );
  }

  // Format Auswahl
  const formats = state?.ctx?.product?.formats || [];
  if (formats.length > 1) {
    const prices = window.SkriftConfigurator?.settings?.prices || {};
    const a4Surcharge = prices.a4_upgrade_surcharge || 0;
    const product = state?.ctx?.product;

    // B2C Brutto-Preis Hilfsfunktion
    const isB2B = state.answers?.customerType === "business";
    const taxRate = (prices.tax_rate || 19) / 100;
    const displayPrice = (nettoPrice) =>
      isB2B ? nettoPrice : nettoPrice * (1 + taxRate);

    // Prüfen ob A4 Aufpreis gilt (nur für Einladungen und Follow-ups)
    const hasA4Surcharge =
      (product?.key === "einladungen" || product?.key === "follow-ups") &&
      formats.includes("a4");

    const formatMap = {
      a4: {
        label: "A4",
        desc: "Standardformat für Briefe",
        price: hasA4Surcharge ? `+ ${fmtEUR(displayPrice(a4Surcharge))}` : "",
      },
      a6p: {
        label: "A6 Hochformat",
        desc: "Kompakt, ideal für Postkarten",
        price: "",
      },
      a6l: {
        label: "A6 Querformat",
        desc: "Kompakt, ideal für Postkarten",
        price: "",
      },
    };

    const formatBody = formats.map((f) => {
      const info = formatMap[f] || { label: f, desc: "", price: "" };
      return h(
        "div",
        {
          class: `sk-option ${state.answers.format === f ? "is-selected" : ""}`,
          onclick: () => dispatch({ type: "ANSWER", patch: { format: f } }),
        },
        [
          h("input", {
            type: "radio",
            name: "format",
            checked: state.answers.format === f,
            onchange: () => {},
          }),
          h(
            "div",
            { class: "sk-option-content" },
            [
              h("div", { class: "sk-option-label", text: info.label }),
              h("div", { class: "sk-option-desc", text: info.desc }),
              info.price
                ? h("div", { class: "sk-option-price", text: info.price })
                : null,
            ].filter(Boolean),
          ),
        ],
      );
    });

    blocks.push(
      renderCard("Welches Format soll das Schriftstück haben?", null, [
        h("div", { class: "sk-options" }, formatBody),
      ]),
    );
  } else if (formats.length === 1) {
    // Auto-set single format (nur wenn noch nicht gesetzt)
    if (!state.answers.format) {
      dispatch({ type: "ANSWER", patch: { format: formats[0] } });
    }
  }

  // Schriftart wird jetzt in Umschlag und Inhalt Steps separat gewählt (nicht hier)
  // Default auf tilda wenn noch nicht gesetzt
  if (!state.answers.font) {
    dispatch({ type: "ANSWER", patch: { font: "tilda" } });
  }
  if (!state.answers.envelopeFont) {
    dispatch({ type: "ANSWER", patch: { envelopeFont: "tilda" } });
  }

  // Follow-ups: Erstellungsmodus
  if (isFollowups(state)) {
    // API-Preis aus Backend holen
    const prices = window.SkriftConfigurator?.settings?.prices || {};
    const apiPrice = prices.api_connection || 250;

    // B2C Brutto-Preis Hilfsfunktion
    const isB2B = state.answers?.customerType === "business";
    const taxRate = (prices.tax_rate || 19) / 100;
    const displayPrice = (nettoPrice) =>
      isB2B ? nettoPrice : nettoPrice * (1 + taxRate);

    const createModes = [
      {
        value: "auto",
        label: "Automatisch aus System",
        desc: "Wir verbinden uns mit Ihrem CRM/Shop-System",
        price: `Einmalig ${fmtEUR(displayPrice(apiPrice))}`,
      },
      {
        value: "manual",
        label: "Manuell",
        desc: "Sie senden uns die Empfängerliste im gewählten Rhythmus",
      },
    ];

    const createBody = createModes.map((mode) =>
      h(
        "div",
        {
          class: `sk-option ${
            state.answers.followupCreateMode === mode.value ? "is-selected" : ""
          }`,
          onclick: () =>
            dispatch({
              type: "ANSWER",
              patch: { followupCreateMode: mode.value },
            }),
        },
        [
          h("input", {
            type: "radio",
            name: "createMode",
            checked: state.answers.followupCreateMode === mode.value,
            onchange: () => {},
          }),
          h(
            "div",
            { class: "sk-option-content" },
            [
              h("div", { class: "sk-option-label", text: mode.label }),
              h("div", { class: "sk-option-desc", text: mode.desc }),
              mode.price
                ? h("div", { class: "sk-option-price", text: mode.price })
                : null,
            ].filter(Boolean),
          ),
        ],
      ),
    );

    blocks.push(
      renderCard("Wie sollen die Follow-ups erstellt werden?", null, [
        h("div", { class: "sk-options" }, createBody),
      ]),
    );

    // Automatische Erstellung Details
    if (state.answers.followupCreateMode === "auto") {
      blocks.push(
        renderCard("Details zur Systemanbindung", null, [
          h("div", { class: "sk-field" }, [
            h("label", {
              class: "sk-field-label is-required",
              text: "Aus welchem System?",
            }),
            h("input", {
              class: "sk-input",
              type: "text",
              value: state.answers.followupSourceSystem || "",
              "data-sk-focus": "followup.system",
              placeholder: "z.B. Shopify, WooCommerce, Sevdesk, HubSpot",
              oninput: (e) =>
                dispatch({
                  type: "ANSWER",
                  patch: { followupSourceSystem: e.target.value },
                }),
            }),
          ]),
          h("div", { class: "sk-field" }, [
            h("label", {
              class: "sk-field-label is-required",
              text: "Was soll die Erstellung eines Follow-ups auslösen?",
            }),
            h("textarea", {
              class: "sk-textarea",
              rows: "3",
              value: state.answers.followupTriggerDescription || "",
              "data-sk-focus": "followup.trigger",
              placeholder:
                "z.B. Wenn ein neuer Kundenauftrag eingeht oder der Kunde seit 3 Monaten nichts mehr bestellt hat.",
              oninput: (e) =>
                dispatch({
                  type: "ANSWER",
                  patch: { followupTriggerDescription: e.target.value },
                }),
            }),
          ]),
          h("div", { class: "sk-field" }, [
            h("label", { class: "sk-field-label", text: "Prüfrhythmus" }),
            h(
              "select",
              {
                class: "sk-select",
                value: state.answers.followupCheckCycle || "monthly",
                onchange: (e) =>
                  dispatch({
                    type: "ANSWER",
                    patch: { followupCheckCycle: e.target.value },
                  }),
              },
              [
                h("option", { value: "monthly" }, ["Monatlich"]),
                h("option", { value: "2m" }, ["Alle 2 Monate"]),
                h("option", { value: "3m" }, ["Alle 3 Monate"]),
                h("option", { value: "6m" }, ["Alle 6 Monate"]),
                h("option", { value: "yearly" }, ["Jährlich"]),
              ],
            ),
          ]),
        ]),
      );
    }

    // Info-Nachricht für Follow-ups (wird immer angezeigt)
    blocks.push(
      h("div", { class: "sk-alert sk-alert-info" }, [
        "Nach Ihrer Bestellung werden wir uns mit Ihnen in Verbindung setzen, um alle Details zu besprechen und die optimale Lösung für Ihre Follow-ups zu finden.",
      ]),
    );
  }

  return h("div", { class: "sk-stack" }, blocks);
}

// Step 3: Umschlag (Versand + Umschlag kombiniert)
function renderEnvelopeStep(state, dispatch) {
  const blocks = [];

  // Schriftart-Auswahl für Umschlag (ERSTE FRAGE - Dropdown)
  blocks.push(
    renderCard("Schriftart für Umschlag", null, [
      h(
        "div",
        { class: "sk-field" },
        [
          h(
            "select",
            {
              class: "sk-select",
              value: state.answers.envelopeFont || "tilda",
              onchange: (e) =>
                dispatch({
                  type: "ANSWER",
                  patch: { envelopeFont: e.target.value },
                }),
            },
            [
              h("option", {
                value: "tilda",
                text: "Tilda - Druckschrift, leicht lesbar und steril",
                selected: (state.answers.envelopeFont || "tilda") === "tilda",
              }),
              h("option", {
                value: "alva",
                text: "Alva - Druckschrift, organisch und informell",
                selected: state.answers.envelopeFont === "alva",
              }),
              h("option", {
                value: "ellie",
                text: "Ellie - Schreibschrift, elegant und geschwungen",
                selected: state.answers.envelopeFont === "ellie",
              }),
            ],
          ),
          renderFontSampleLink(),
        ].filter(Boolean),
      ),
    ]),
  );

  // Preise aus Backend holen
  const prices = window.SkriftConfigurator?.settings?.prices || {};
  const shippingBulk = prices.shipping_bulk || 4.95;

  // B2C Brutto-Preis Hilfsfunktion
  const isB2B = state.answers?.customerType === "business";
  const taxRate = (prices.tax_rate || 19) / 100;
  const displayPrice = (nettoPrice) =>
    isB2B ? nettoPrice : nettoPrice * (1 + taxRate);

  // Direktversand-Preise berechnen (Inland/Ausland)
  const shippingPrices = calculateDirectShippingPrices(state);
  const domesticPriceText = fmtEUR(displayPrice(shippingPrices.domesticPrice));
  const internationalPriceText = fmtEUR(
    displayPrice(shippingPrices.internationalPrice),
  );

  // Versandart Auswahl
  // Bei Follow-ups ist nur Direktversand möglich und kein Aufpreis wird angezeigt
  const shippingOptions = isFollowups(state)
    ? [
        {
          value: "direct",
          label: "Einzeln an die Empfänger",
          desc: "Direktversand an Ihre Empfänger – inklusive Kuvertierung und Beschriftung.",
          price: "", // Kein Aufpreis bei Follow-ups anzeigen
        },
      ]
    : [
        {
          value: "direct",
          label: "Einzeln an die Empfänger",
          desc: "Wir versenden direkt an Ihre Empfänger – inklusive Kuvertierung und Beschriftung",
          price: `Inland: ${domesticPriceText} / Ausland: ${internationalPriceText} pro Stück`,
        },
        {
          value: "bulk",
          label: "Sammelversand an Sie",
          desc: "Sie erhalten alle Schriftstücke zur eigenen Verteilung",
          price: `Einmalig ${fmtEUR(displayPrice(shippingBulk))} Versandkosten`,
        },
      ];

  const shippingBody = shippingOptions.map((opt) =>
    h(
      "div",
      {
        class: `sk-option ${
          state.answers.shippingMode === opt.value ? "is-selected" : ""
        }`,
        onclick: () =>
          dispatch({ type: "ANSWER", patch: { shippingMode: opt.value } }),
      },
      [
        h("input", {
          type: "radio",
          name: "shipping",
          checked: state.answers.shippingMode === opt.value,
          onchange: () => {},
        }),
        h("div", { class: "sk-option-content" }, [
          h("div", { class: "sk-option-label", text: opt.label }),
          h("div", { class: "sk-option-desc", text: opt.desc }),
          h("div", { class: "sk-option-price", text: opt.price }),
        ]),
      ],
    ),
  );

  blocks.push(
    renderCard(
      "Wie sollen die Schriftstücke versendet werden?",
      "Wählen Sie die passende Versandart",
      [h("div", { class: "sk-options" }, shippingBody)],
    ),
  );

  // Umschlag-Optionen (nur wenn Versandart gewählt)
  if (!state.answers.shippingMode) {
    return h("div", { class: "sk-stack" }, blocks);
  }

  // Bei Direktversand automatisch Umschlag
  if (state.answers.shippingMode === "direct") {
    blocks.push(
      h("div", { class: "sk-alert sk-alert-info" }, [
        "Bei Direktversand an Empfänger wird automatisch ein beschrifteter Umschlag verwendet.",
      ]),
    );
  } else {
    // Bulk: Umschlag optional
    const envelopeBase = prices.envelope_base || 0.5;
    const envOptions = [
      {
        value: true,
        label: "Ja, ich wünsche ein Kuvert",
        price: `+ ${fmtEUR(displayPrice(envelopeBase))}`,
      },
      { value: false, label: "Nein, ich benötige kein Kuvert", price: "" },
    ];

    const envBody = envOptions.map((opt) =>
      h(
        "div",
        {
          class: `sk-option ${
            state.answers.envelope === opt.value ? "is-selected" : ""
          }`,
          onclick: () =>
            dispatch({ type: "ANSWER", patch: { envelope: opt.value } }),
        },
        [
          h("input", {
            type: "radio",
            name: "envelope",
            checked: state.answers.envelope === opt.value,
            onchange: () => {},
          }),
          h(
            "div",
            { class: "sk-option-content" },
            [
              h("div", { class: "sk-option-label", text: opt.label }),
              opt.price
                ? h("div", { class: "sk-option-price", text: opt.price })
                : null,
            ].filter(Boolean),
          ),
        ],
      ),
    );

    blocks.push(
      renderCard("Benötigen Sie ein Kuvert?", null, [
        h("div", { class: "sk-options" }, envBody),
      ]),
    );
  }

  // Beschriftungsmodus
  // Bei Direktversand: Direkt Empfängerdaten-Tabelle zeigen, keine Auswahl
  if (state.answers.shippingMode === "direct") {
    // envelopeMode wird automatisch durch den Reducer auf "recipientData" gesetzt
    // wenn shippingMode === "direct" (siehe configurator-state.js Zeile 486-492)

    // Bei Follow-ups: Unterscheidung zwischen auto und manual
    const isFollowupsProduct = state?.ctx?.product?.isFollowUp === true;
    if (!isFollowupsProduct) {
      // Normale Produkte: Empfängerdaten-Tabelle anzeigen
      blocks.push(renderRecipientsTable(state, dispatch));
    } else if (state.answers.followupCreateMode === "auto") {
      // Follow-ups mit automatischer Erstellung: Daten kommen aus System
      blocks.push(
        renderCard("Empfängerdaten", null, [
          h("div", { class: "sk-alert sk-alert-info" }, [
            "Die Empfängerdaten werden automatisch aus Ihrem System übernommen. " +
              "Im Rahmen der Einrichtung werden wir gemeinsam die Schnittstelle zu Ihrem System konfigurieren.",
          ]),
        ]),
      );
    } else {
      // Follow-ups mit manueller Erstellung: Daten werden später übermittelt
      blocks.push(
        renderCard("Empfängerdaten", null, [
          h("div", { class: "sk-alert sk-alert-info" }, [
            "Im Nachgang wird Ihnen eine E-Mail zugesendet mit weiteren Angaben, " +
              "wohin Sie die Empfängerdaten hochladen können.",
          ]),
        ]),
      );
    }
  } else if (state.answers.envelope === true) {
    // Bei Bulk-Versand mit Umschlag: Beschriftungsmodus-Auswahl anzeigen
    // Neues Feld: envelope_labeling, Fallback auf alte Felder
    const envelopeLabeling =
      prices.envelope_labeling || prices.envelope_recipient_address || 0.5;

    const modeOptions = [
      {
        value: "recipientData",
        label: "Empfängerdaten",
        desc: "Klassische Adressierung mit Name und Anschrift",
        price: `+ ${fmtEUR(displayPrice(envelopeLabeling))}`,
      },
      {
        value: "customText",
        label: "Individueller Text",
        desc: "Freier Text mit Platzhaltern",
        price: `+ ${fmtEUR(displayPrice(envelopeLabeling))}`,
      },
      {
        value: "none",
        label: "Keine Beschriftung",
        desc: "Umschlag bleibt unbeschriftet",
        price: "",
      },
    ];

    const modeBody = modeOptions.map((opt) =>
      h(
        "div",
        {
          class: `sk-option ${
            state.answers.envelopeMode === opt.value ? "is-selected" : ""
          }`,
          onclick: () =>
            dispatch({ type: "ANSWER", patch: { envelopeMode: opt.value } }),
        },
        [
          h("input", {
            type: "radio",
            name: "envelopeMode",
            checked: state.answers.envelopeMode === opt.value,
            onchange: () => {},
          }),
          h(
            "div",
            { class: "sk-option-content" },
            [
              h("div", { class: "sk-option-label", text: opt.label }),
              h("div", { class: "sk-option-desc", text: opt.desc }),
              opt.price
                ? h("div", { class: "sk-option-price", text: opt.price })
                : null,
            ].filter(Boolean),
          ),
        ],
      ),
    );

    blocks.push(
      renderCard("Womit soll das Kuvert beschriftet werden?", null, [
        h("div", { class: "sk-options" }, modeBody),
      ]),
    );

    // Empfängerdaten Tabelle (nur wenn gewählt)
    if (state.answers.envelopeMode === "recipientData") {
      blocks.push(renderRecipientsTable(state, dispatch));
    }

    // Custom Text
    if (state.answers.envelopeMode === "customText") {
      blocks.push(
        renderCard(
          "Text für Umschlag",
          "Max. 160 Zeichen, keine Zeilenumbrüche",
          [
            h("input", {
              type: "text",
              class: "sk-input",
              maxlength: "160",
              value: state.answers.envelopeCustomText || "",
              "data-sk-focus": "envelope.customText",
              placeholder: "z.B. Herzliche Grüße an [[vorname]] [[nachname]]",
              oninput: (() => {
                let debounceTimer = null;
                return (e) => {
                  // Zeilenumbrüche entfernen (falls durch Paste eingefügt)
                  const value = e.target.value.replace(/[\r\n]/g, " ");
                  e.target.value = value;
                  // Debounced dispatch (300ms)
                  if (debounceTimer) clearTimeout(debounceTimer);
                  debounceTimer = setTimeout(() => {
                    dispatch({
                      type: "ANSWER",
                      patch: { envelopeCustomText: value },
                    });
                  }, 300);
                };
              })(),
            }),
            renderPlaceholderHelpText(),
          ],
        ),
      );

      const ph = extractPlaceholders(state.answers.envelopeCustomText);
      if (ph.length > 0) {
        blocks.push(
          renderPlaceholderTable(state, dispatch, ph, "Platzhalter-Werte"),
        );
      }
    }
  }

  return h("div", { class: "sk-stack" }, blocks);
}

// Step 6: Inhalt
function renderContentStep(state, dispatch) {
  const blocks = [];

  // Schriftart-Auswahl für Schriftstück (ERSTE FRAGE - Dropdown)
  blocks.push(
    renderCard("Schriftart für Schriftstück", null, [
      h(
        "div",
        { class: "sk-field" },
        [
          h(
            "select",
            {
              class: "sk-select",
              value: state.answers.font || "tilda",
              onchange: (e) =>
                dispatch({
                  type: "ANSWER",
                  patch: { font: e.target.value },
                }),
            },
            [
              h("option", {
                value: "tilda",
                text: "Tilda - Druckschrift, leicht lesbar und steril",
                selected: (state.answers.font || "tilda") === "tilda",
              }),
              h("option", {
                value: "alva",
                text: "Alva - Druckschrift, organisch und informell",
                selected: state.answers.font === "alva",
              }),
              h("option", {
                value: "ellie",
                text: "Ellie - Schreibschrift, elegant und geschwungen",
                selected: state.answers.font === "ellie",
              }),
            ],
          ),
          renderFontSampleLink(),
        ].filter(Boolean),
      ),
    ]),
  );

  // Texterstellung
  // Preise aus Backend holen
  const prices = window.SkriftConfigurator?.settings?.prices || {};
  const textservicePrice = prices.textservice || 0;

  // B2C Brutto-Preis Hilfsfunktion
  const isB2B = state.answers?.customerType === "business";
  const taxRate = (prices.tax_rate || 19) / 100;
  const displayPrice = (nettoPrice) =>
    isB2B ? nettoPrice : nettoPrice * (1 + taxRate);

  const contentOptions = [
    {
      value: "self",
      label: "Ich erstelle den Text selbst",
      desc: "Sie geben den vollständigen Text vor",
    },
    {
      value: "textservice",
      label: "Textservice beauftragen",
      desc: "Wir erstellen den Text professionell für Sie",
      price:
        textservicePrice > 0
          ? `Einmalig ${fmtEUR(displayPrice(textservicePrice))}`
          : "",
    },
  ];

  const contentBody = contentOptions.map((opt) =>
    h(
      "div",
      {
        class: `sk-option ${
          state.answers.contentCreateMode === opt.value ? "is-selected" : ""
        }`,
        onclick: () =>
          dispatch({ type: "ANSWER", patch: { contentCreateMode: opt.value } }),
      },
      [
        h("input", {
          type: "radio",
          name: "contentMode",
          checked: state.answers.contentCreateMode === opt.value,
          onchange: () => {},
        }),
        h(
          "div",
          { class: "sk-option-content" },
          [
            h("div", { class: "sk-option-label", text: opt.label }),
            h("div", { class: "sk-option-desc", text: opt.desc }),
            opt.price
              ? h("div", { class: "sk-option-price", text: opt.price })
              : null,
          ].filter(Boolean),
        ),
      ],
    ),
  );

  blocks.push(
    renderCard("Möchten Sie den Inhalt selbst erstellen?", null, [
      h("div", { class: "sk-options" }, contentBody),
    ]),
  );

  // Textfeld (wenn selbst erstellt)
  if (state.answers.contentCreateMode === "self") {
    const maxChars = state.answers.format === "a4" ? 2500 : 500;
    const hints = [];

    if (state.answers.envelopeMode === "recipientData") {
      hints.push("Verfügbare Platzhalter: [[vorname]], [[name]]");
    } else {
      const phEnv = state.placeholders?.envelope || [];
      if (phEnv.length > 0) {
        hints.push(
          `Umschlag-Platzhalter: ${phEnv.map((p) => `[[${p}]]`).join(", ")}`,
        );
      }
    }

    blocks.push(
      renderCard(
        "Inhalt des Schriftstücks",
        `Max. ${maxChars} Zeichen`,
        [
          h("textarea", {
            class: "sk-textarea",
            rows: "10",
            maxlength: String(maxChars),
            value: state.answers.letterText || "",
            "data-sk-focus": "content.text",
            placeholder:
              "Ihr Text hier. Nutzen Sie [[Platzhalter]] für individuelle Inhalte.",
            oninput: (() => {
              let debounceTimer = null;
              return (e) => {
                const value = e.target.value;
                // Debounced dispatch (300ms)
                if (debounceTimer) clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                  dispatch({
                    type: "ANSWER",
                    patch: { letterText: value },
                  });
                }, 300);
              };
            })(),
          }),
          renderPlaceholderHelpText(hints),
        ].filter(Boolean),
      ),
    );

    // Platzhalter Verarbeitung
    const usedInLetter = extractPlaceholders(state.answers.letterText);
    const envPlaceholders = state.placeholders?.envelope || [];
    const envSet = new Set(envPlaceholders);

    // Bei Follow-ups: Keine Platzhalter-Tabelle anzeigen
    // (Empfängerdaten kommen aus CRM, Platzhalter werden dort verwaltet)
    if (isFollowups(state)) {
      // Platzhalter-Tabelle für Follow-ups ausgeblendet
    } else {
      // Prüfen ob Empfängerdaten für Platzhalter verfügbar sind:
      // - envelopeMode muss "recipientData" sein
      // - addressMode muss "classic" sein (nicht "free")
      // - envelope darf nicht false sein (kein Kuvert)
      const hasClassicRecipientData =
        state.answers.envelopeMode === "recipientData" &&
        (state.addressMode || "classic") === "classic" &&
        state.answers.envelope !== false;

      if (hasClassicRecipientData) {
        // Bei klassischen Empfängerdaten: vorname, name, ort sind verfügbar + neue eigene Platzhalter
        const predefinedRecipient = new Set(["vorname", "name", "ort"]);
        const newPlaceholders = usedInLetter.filter(
          (p) => !predefinedRecipient.has(p),
        );

        // Kombinierte Tabelle für reguläre Produkte
        blocks.push(
          renderCombinedPlaceholderTable(
            state,
            dispatch,
            Array.from(predefinedRecipient),
            newPlaceholders,
            "Platzhalter-Werte",
          ),
        );
      } else if (state.answers.envelopeMode === "customText") {
        // Bei individuellem Text: Alle Umschlag-Platzhalter verfügbar + neue eigene Platzhalter
        const newPlaceholders = usedInLetter.filter((p) => !envSet.has(p));

        // Kombinierte Tabelle: Umschlag-Platzhalter (read-only) + neue (editierbar)
        if (envPlaceholders.length > 0 || newPlaceholders.length > 0) {
          blocks.push(
            renderCombinedPlaceholderTable(
              state,
              dispatch,
              envPlaceholders,
              newPlaceholders,
              "Platzhalter-Werte",
            ),
          );
        }
      } else {
        // Kein Kuvert oder freie Adresse: Nur eigene Platzhalter anzeigen (ohne vorname, name, ort)
        if (usedInLetter.length > 0) {
          blocks.push(
            renderPlaceholderTable(
              state,
              dispatch,
              usedInLetter,
              "Platzhalter-Werte",
              false,
            ),
          );
        }
      }
    }
  } else if (state.answers.contentCreateMode === "textservice") {
    blocks.push(
      h("div", { class: "sk-alert sk-alert-info" }, [
        "Unser Textservice erstellt professionelle, individuell auf Ihre Bedürfnisse zugeschnittene Texte. " +
          "Nach der Bestellung werden wir Sie kontaktieren, um Details zu besprechen.",
      ]),
    );
  }

  // Motiv (nur bei Postkarten, oder bei Einladungen/Follow-ups wenn A6 Format)
  if (supportsMotif(state)) {
    const motifOptions = [
      { value: true, label: "Ja, ich möchte ein Motiv" },
      { value: false, label: "Nein, kein Motiv" },
    ];

    const motifBody = motifOptions.map((opt) =>
      h(
        "div",
        {
          class: `sk-option ${
            state.answers.motifNeed === opt.value ? "is-selected" : ""
          }`,
          onclick: () =>
            dispatch({ type: "ANSWER", patch: { motifNeed: opt.value } }),
        },
        [
          h("input", {
            type: "radio",
            name: "motif",
            checked: state.answers.motifNeed === opt.value,
            onchange: () => {},
          }),
          h("div", { class: "sk-option-content" }, [
            h("div", { class: "sk-option-label", text: opt.label }),
          ]),
        ],
      ),
    );

    blocks.push(
      renderCard(
        "Soll ein Motiv auf der Vorderseite abgebildet werden?",
        null,
        [h("div", { class: "sk-options" }, motifBody)],
      ),
    );

    // Motiv Quelle
    if (state.answers.motifNeed === true) {
      const motifUploadPrice = prices.motif_upload || 0.3;
      const motifDesignPrice = prices.motif_design || 0;

      // Bei A4-Format ist Upload nicht möglich, nur bedruckte Karten
      const isA4 = state.answers.format === "a4";

      const sourceOptions = [
        !isA4 && {
          value: "upload",
          label: "Eigenes Motiv hochladen",
          desc: "Sie laden Ihre Datei hoch",
          price:
            motifUploadPrice > 0
              ? `Einmalig ${fmtEUR(displayPrice(motifUploadPrice))}`
              : "",
        },
        {
          value: "printed",
          label: "Bedruckte Karten zusenden",
          desc: isA4
            ? "Sie senden uns fertig bedruckte A4-Karten"
            : "Sie senden uns fertig bedruckte A6-Karten",
          price: "",
        },
        !isA4 && {
          value: "design",
          label: "Designservice beauftragen",
          desc: "Wir erstellen ein individuelles Design",
          price:
            motifDesignPrice > 0
              ? `Einmalig ${fmtEUR(displayPrice(motifDesignPrice))}`
              : "",
        },
      ].filter(Boolean);

      const sourceBody = sourceOptions.map((opt) =>
        h(
          "div",
          {
            class: `sk-option ${
              state.answers.motifSource === opt.value ? "is-selected" : ""
            }`,
            onclick: () =>
              dispatch({ type: "ANSWER", patch: { motifSource: opt.value } }),
          },
          [
            h("input", {
              type: "radio",
              name: "motifSource",
              checked: state.answers.motifSource === opt.value,
              onchange: () => {},
            }),
            h(
              "div",
              { class: "sk-option-content" },
              [
                h("div", { class: "sk-option-label", text: opt.label }),
                h("div", { class: "sk-option-desc", text: opt.desc }),
                opt.price
                  ? h("div", { class: "sk-option-price", text: opt.price })
                  : null,
              ].filter(Boolean),
            ),
          ],
        ),
      );

      blocks.push(
        renderCard("Woher kommt das Motiv?", null, [
          h("div", { class: "sk-options" }, sourceBody),
        ]),
      );

      // Upload
      if (state.answers.motifSource === "upload") {
        blocks.push(
          renderCard(
            "Motiv hochladen",
            "Erlaubt: SVG, PDF, PNG, JPG, WEBP im A6-Format",
            [
              h("input", {
                class: "sk-input",
                type: "file",
                accept: ".svg,.pdf,image/*",
                "data-sk-focus": "motif.upload",
                onchange: (e) => {
                  const f = e.target.files && e.target.files[0];
                  if (!f) return;
                  // Datei global speichern für späteren Upload
                  window.motifFileToUpload = f;
                  dispatch({
                    type: "ANSWER",
                    patch: {
                      motifFileName: f.name,
                      motifFileMeta: {
                        name: f.name,
                        size: f.size,
                        type: f.type,
                      },
                    },
                  });
                },
              }),
              state.answers.motifFileName
                ? h("div", {
                    class: "sk-help",
                    text: `Ausgewählt: ${state.answers.motifFileName}`,
                  })
                : null,
            ].filter(Boolean),
          ),
        );
      }

      // Info-Nachricht für "Bedruckte Karten zusenden"
      if (state.answers.motifSource === "printed") {
        blocks.push(
          h("div", { class: "sk-alert sk-alert-info" }, [
            "Alle weiteren Informationen, wohin die bedruckten Karten gesendet werden sollen, erhalten Sie danach per E-Mail.",
          ]),
        );
      }

      // Info-Nachricht für "Designservice"
      if (state.answers.motifSource === "design") {
        blocks.push(
          h("div", { class: "sk-alert sk-alert-info" }, [
            "Unser Designservice erstellt ein individuelles Design, das perfekt auf Ihre Bedürfnisse zugeschnitten ist. " +
              "Nach der Bestellung werden wir Sie kontaktieren, um Ihre Vorstellungen und Wünsche im Detail zu besprechen.",
          ]),
        );
      }
    }
  }

  return h("div", { class: "sk-stack" }, blocks);
}

// Step 7: Kundendaten
function renderCustomerDataStep(state, dispatch) {
  const blocks = [];
  const b = state.order.billing;

  const fields = [
    { key: "firstName", label: "Vorname", required: true, type: "text" },
    { key: "lastName", label: "Nachname", required: true, type: "text" },
  ];

  if (state.answers.customerType === "business") {
    fields.push({
      key: "company",
      label: "Unternehmensname",
      required: true,
      type: "text",
    });
  }

  // E-Mail und Telefon (Pflichtfelder)
  fields.push(
    { key: "email", label: "E-Mail-Adresse", required: true, type: "email" },
    { key: "phone", label: "Telefonnummer", required: true, type: "tel" },
  );

  fields.push(
    {
      key: "street",
      label: "Straße und Hausnummer",
      required: true,
      type: "text",
    },
    { key: "zip", label: "PLZ", required: true, type: "text" },
    { key: "city", label: "Stadt", required: true, type: "text" },
  );

  const billingFields = fields.map((f) =>
    h("div", { class: "sk-field" }, [
      h("label", {
        class: `sk-field-label ${f.required ? "is-required" : ""}`,
        text: f.label,
      }),
      h("input", {
        class: "sk-input",
        type: f.type,
        value: b[f.key] || "",
        "data-sk-focus": `billing.${f.key}`,
        ...(f.key === "zip" ? { pattern: "[0-9]*", inputmode: "numeric" } : {}),
        oninput: (e) => {
          let value = e.target.value;
          // PLZ: Nur Zahlen erlauben
          if (f.key === "zip") {
            value = value.replace(/[^0-9]/g, "");
            e.target.value = value;
          }
          dispatch({
            type: "SET_ORDER_BILLING",
            patch: { [f.key]: value },
          });
        },
      }),
    ]),
  );

  billingFields.push(
    h("div", { class: "sk-field" }, [
      h("label", { class: "sk-field-label is-required", text: "Land" }),
      h(
        "select",
        {
          class: "sk-select",
          value: b.country || "Deutschland",
          "data-sk-focus": "billing.country",
          onchange: (e) =>
            dispatch({
              type: "SET_ORDER_BILLING",
              patch: { country: e.target.value },
            }),
        },
        [
          h("option", { value: "Deutschland" }, ["Deutschland"]),
          h("option", { value: "Luxemburg" }, ["Luxemburg"]),
          h("option", { value: "Frankreich" }, ["Frankreich"]),
          h("option", { value: "Österreich" }, ["Österreich"]),
        ],
      ),
    ]),
  );

  blocks.push(renderCard("Rechnungsdaten", null, billingFields));

  // Alternative Lieferadresse
  blocks.push(
    renderCard("Lieferadresse", null, [
      h("label", { class: "sk-option", onclick: (e) => e.stopPropagation() }, [
        h("input", {
          type: "checkbox",
          checked: !!state.order.shippingDifferent,
          onclick: (e) => e.stopPropagation(),
          onchange: (e) => {
            e.stopPropagation();
            dispatch({
              type: "SET_ORDER",
              patch: { shippingDifferent: e.target.checked },
            });
          },
        }),
        h("div", { class: "sk-option-content" }, [
          h("div", {
            class: "sk-option-label",
            text: "Alternative Lieferadresse angeben",
          }),
        ]),
      ]),
    ]),
  );

  if (state.order.shippingDifferent) {
    const sh = state.order.shipping;
    const shippingFields = fields.map((f) =>
      h("div", { class: "sk-field" }, [
        h("label", {
          class: `sk-field-label ${f.required ? "is-required" : ""}`,
          text: f.label,
        }),
        h("input", {
          class: "sk-input",
          type: f.type,
          value: sh[f.key] || "",
          "data-sk-focus": `shipping.${f.key}`,
          ...(f.key === "zip"
            ? { pattern: "[0-9]*", inputmode: "numeric" }
            : {}),
          oninput: (e) => {
            let value = e.target.value;
            // PLZ: Nur Zahlen erlauben
            if (f.key === "zip") {
              value = value.replace(/[^0-9]/g, "");
              e.target.value = value;
            }
            dispatch({
              type: "SET_ORDER_SHIPPING",
              patch: { [f.key]: value },
            });
          },
        }),
      ]),
    );

    shippingFields.push(
      h("div", { class: "sk-field" }, [
        h("label", { class: "sk-field-label is-required", text: "Land" }),
        h(
          "select",
          {
            class: "sk-select",
            value: sh.country || "Deutschland",
            "data-sk-focus": "shipping.country",
            onchange: (e) =>
              dispatch({
                type: "SET_ORDER_SHIPPING",
                patch: { country: e.target.value },
              }),
          },
          [
            h("option", { value: "Deutschland" }, ["Deutschland"]),
            h("option", { value: "Luxemburg" }, ["Luxemburg"]),
            h("option", { value: "Frankreich" }, ["Frankreich"]),
            h("option", { value: "Österreich" }, ["Österreich"]),
          ],
        ),
      ]),
    );

    blocks.push(renderCard("Alternative Lieferadresse", null, shippingFields));
  }

  return h("div", { class: "sk-stack" }, blocks);
}

// Motiv hochladen wenn vorhanden (vor Bestellabschluss)
async function uploadMotifIfNeeded(state, orderNumber) {
  const api = window.SkriftBackendAPI;
  if (
    state.answers.motifSource === "upload" &&
    window.motifFileToUpload &&
    api
  ) {
    try {
      console.log("[Order] Uploading motif file...");
      const motifResult = await api.uploadMotif(
        window.motifFileToUpload,
        orderNumber,
      );
      if (motifResult.success) {
        console.log("[Order] Motif uploaded:", motifResult.url);
        return motifResult.url;
      } else {
        console.error("[Order] Motif upload failed:", motifResult.error);
      }
    } catch (error) {
      console.error("[Order] Motif upload error:", error);
    }
  }
  return null;
}

// Webhook-Aufruf nach Bestellung
async function handleOrderSubmit(state) {
  const isB2B = state.answers?.customerType === "business";
  const backend = window.SkriftConfigurator?.settings?.backend_connection || {};
  const webhookUrlBusiness = backend.webhook_url_business;
  const webhookUrlPrivate = backend.webhook_url_private;
  const redirectUrlBusiness = backend.redirect_url_business;
  const redirectUrlPrivate = backend.redirect_url_private;

  // Bestellnummer generieren (fortlaufend vom WP-Backend)
  const api = window.SkriftBackendAPI;
  const orderNumber = api ? await api.generateOrderNumber() : `S-${Date.now()}`;

  // Motiv hochladen wenn vorhanden
  const motifUrl = await uploadMotifIfNeeded(state, orderNumber);
  if (motifUrl) {
    state.answers.motifFileUrl = motifUrl;
  }

  // Gutschein als verwendet markieren (falls vorhanden)
  const voucherCode = state.order?.voucherStatus?.valid
    ? state.order.voucherCode
    : null;
  if (voucherCode) {
    try {
      const restUrl = window.SkriftConfigurator?.restUrl || "/wp-json/";
      await fetch(restUrl + "skrift/v1/voucher/use", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ code: voucherCode }),
      });
    } catch (error) {
      // Fehler beim Markieren des Gutscheins - trotzdem fortfahren
    }
  }

  // Bestellung finalisieren: Preview-Dateien aus Cache in Output-Ordner kopieren
  let finalizeResult = null;
  if (api && api.sessionId) {
    try {
      finalizeResult = await api.finalizeOrder(api.sessionId, orderNumber, {
        customer: state.order,
        quote: state.quote,
      });
      console.log("[Order] Finalize result:", finalizeResult);
    } catch (error) {
      console.error("[Order] Finalize error:", error);
    }
  } else {
    console.warn("[Order] Cannot finalize - no API or session available");
  }

  // Für Business: Webhook sofort aufrufen
  // Für Privat: Erst PayPal-Zahlung, dann Webhook
  if (isB2B) {
    // Business-Kunde: Webhook aufrufen und dann weiterleiten
    if (webhookUrlBusiness) {
      try {
        const orderData = {
          order_number: orderNumber,
          customer_type: state.answers.customerType,
          product: state.ctx?.product?.key,
          quantity: state.answers.quantity,
          format: state.answers.format,
          shipping_mode: state.answers.shippingMode,
          envelope: state.answers.envelope,
          envelope_mode: state.answers.envelopeMode,
          customer_data: state.order,
          quote: state.quote,
          timestamp: new Date().toISOString(),
          finalize_result: finalizeResult,
        };

        const response = await fetch(webhookUrlBusiness, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(orderData),
        });

        if (!response.ok) {
          alert(
            "Bestellung wurde aufgenommen, aber es gab ein Problem bei der Übermittlung. Bitte kontaktieren Sie uns.",
          );
        }
      } catch (error) {
        alert(
          "Bestellung wurde aufgenommen, aber es gab ein Problem bei der Übermittlung. Bitte kontaktieren Sie uns.",
        );
      }
    }

    // Weiterleitung für Business-Kunden
    if (redirectUrlBusiness) {
      window.location.href = redirectUrlBusiness;
    } else {
      alert(
        "Vielen Dank für Ihre Bestellung! Sie erhalten in Kürze eine Bestätigungs-E-Mail mit allen Details.",
      );
    }
  } else {
    // Privatkunde: Ohne PayPal direkt zur Privat-URL weiterleiten
    if (redirectUrlPrivate) {
      window.location.href = redirectUrlPrivate;
    } else {
      alert(
        "Weiterleitung zu PayPal folgt - Integration wird vorbereitet.\n\nNach erfolgreicher Zahlung wird der Webhook aufgerufen.",
      );
    }
  }
}

// Hilfsfunktion: Gutschein validieren
function validateVoucherCode(voucherCode, dispatch) {
  const code = voucherCode.trim();

  if (!code) {
    dispatch({
      type: "SET_ORDER",
      patch: { voucherStatus: { valid: false, error: "Bitte Code eingeben" } },
    });
    return;
  }

  const vouchers = window.SkriftConfigurator?.vouchers || {};
  const voucher = vouchers[code];

  if (!voucher) {
    dispatch({
      type: "SET_ORDER",
      patch: {
        voucherStatus: { valid: false, error: "Gutschein nicht gefunden" },
      },
    });
    return;
  }

  if (voucher.expiry_date) {
    // Vergleiche nur das Datum, nicht die Uhrzeit
    const expiryDate = new Date(voucher.expiry_date);
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    expiryDate.setHours(0, 0, 0, 0);

    if (expiryDate < today) {
      dispatch({
        type: "SET_ORDER",
        patch: {
          voucherStatus: { valid: false, error: "Gutschein ist abgelaufen" },
        },
      });
      return;
    }
  }

  if (voucher.usage_limit > 0 && voucher.usage_count >= voucher.usage_limit) {
    dispatch({
      type: "SET_ORDER",
      patch: {
        voucherStatus: {
          valid: false,
          error: "Gutschein wurde bereits zu oft eingelöst",
        },
      },
    });
    return;
  }

  dispatch({
    type: "SET_ORDER",
    patch: {
      voucherStatus: {
        valid: true,
        voucher: voucher,
        message:
          voucher.type === "percent"
            ? `${voucher.value}% Rabatt`
            : `${voucher.value.toFixed(2)}€ Rabatt`,
      },
    },
  });
}

// Step 8: Review
function renderReviewStep(state, dispatch) {
  const blocks = [];

  // Zusammenfassung
  const summary = [
    [
      "Kundentyp",
      state.answers.customerType === "business"
        ? "Geschäftskunde"
        : "Privatkunde",
    ],
    ["Produkt", state?.ctx?.product?.label || ""],
    ["Menge", String(state.answers.quantity || "")],
    [
      "Format",
      (() => {
        const fmt = state.answers.format;
        if (fmt === "a6p") return "A6 Hochformat";
        if (fmt === "a6l") return "A6 Querformat";
        if (fmt === "a4") return "A4";
        return fmt?.toUpperCase() || "";
      })(),
    ],
    [
      "Versand",
      state.answers.shippingMode === "direct"
        ? "Einzeln an Empfänger"
        : "Gesammelt",
    ],
    ["Umschlag", state.answers.envelope ? "Ja" : "Nein"],
    [
      "Beschriftung",
      state.answers.envelopeMode === "recipientData"
        ? "Empfängerdaten"
        : state.answers.envelopeMode === "customText"
          ? "Individuell"
          : "Keine",
    ],
  ];

  const table = h("table", { class: "sk-table" }, []);
  const tbody = h("tbody", {}, []);
  for (const [k, v] of summary) {
    tbody.appendChild(
      h("tr", {}, [h("td", { text: k }), h("td", { text: v })]),
    );
  }
  table.appendChild(tbody);

  blocks.push(renderCard("Ihre Auswahl", null, [table]));

  // Kundendaten Übersicht (vor Preis!)
  const b = state.order.billing;
  const customerDataRows = [
    ["Vorname", b.firstName || ""],
    ["Nachname", b.lastName || ""],
  ];

  if (state.answers.customerType === "business" && b.company) {
    customerDataRows.push(["Unternehmen", b.company]);
  }

  customerDataRows.push(
    ["E-Mail", b.email || ""],
    ["Telefon", b.phone || ""],
    ["Straße und Hausnummer", b.street || ""],
    ["PLZ", b.zip || ""],
    ["Stadt", b.city || ""],
    ["Land", b.country || "Deutschland"],
  );

  const customerDataTable = h("table", { class: "sk-table" }, []);
  const customerDataBody = h("tbody", {}, []);
  for (const [k, v] of customerDataRows) {
    customerDataBody.appendChild(
      h("tr", {}, [h("td", { text: k }), h("td", { text: v })]),
    );
  }
  customerDataTable.appendChild(customerDataBody);

  blocks.push(renderCard("Ihre Daten", null, [customerDataTable]));

  // Preis
  const isB2B = state.answers?.customerType === "business";
  const isFU = isFollowups(state);

  if (isFU) {
    // Follow-ups: Zeige Staffelung + Einrichtungskosten
    const followupPricing = calculateFollowupPricing(state);

    if (followupPricing) {
      // Staffelungs-Tabelle
      const staffelTable = h("table", { class: "sk-table" }, []);
      staffelTable.appendChild(
        h("thead", {}, [
          h("tr", {}, [
            h("th", { text: "Menge/Monat" }),
            h("th", {
              text: isB2B
                ? "Preis pro Schriftstück (netto)"
                : "Preis pro Schriftstück (brutto)",
            }),
          ]),
        ]),
      );

      // Grundpreis pro Stück (wie in Kopfzeile, OHNE Multiplikator)
      const basePrice = calculateFollowupBasePricePerPiece(state);

      const staffelBody = h("tbody", {}, []);
      for (const tier of followupPricing.tiers) {
        // Preis pro Schriftstück = Grundpreis * Multiplikator
        const pricePerItem = basePrice * tier.multiplier;
        const formatted = formatPrice(pricePerItem, state);
        const pricePerItemFormatted = formatted.display;

        staffelBody.appendChild(
          h("tr", {}, [
            h("td", { text: tier.label }),
            h("td", { text: pricePerItemFormatted }),
          ]),
        );
      }
      staffelTable.appendChild(staffelBody);

      blocks.push(renderCard("Preisstaffelung", null, [staffelTable]));

      // Einrichtungskosten - detailliert aufschlüsseln
      if (followupPricing.setup > 0) {
        const setupItems = [];
        const prices = window.SkriftConfigurator?.settings?.prices || {};

        // API-Anbindung
        if (state.answers.followupCreateMode === "auto") {
          const apiPrice = prices.api_connection || 0;
          if (apiPrice > 0) {
            const formatted = formatPrice(apiPrice, state);
            setupItems.push(
              h(
                "div",
                {
                  style:
                    "display: flex; justify-content: space-between; padding: 8px 0;",
                },
                [
                  h("span", { text: "API-Anbindung" }),
                  h("span", {
                    style: "font-weight: 600",
                    text: formatted.display,
                  }),
                ],
              ),
            );
          }
        }

        // Motiv Upload
        if (state.answers.motifSource === "upload") {
          const motifPrice = prices.motif_upload || 0;
          if (motifPrice > 0) {
            const formatted = formatPrice(motifPrice, state);
            setupItems.push(
              h(
                "div",
                {
                  style:
                    "display: flex; justify-content: space-between; padding: 8px 0;",
                },
                [
                  h("span", { text: "Motiv Upload" }),
                  h("span", {
                    style: "font-weight: 600",
                    text: formatted.display,
                  }),
                ],
              ),
            );
          }
        }

        // Designservice
        if (state.answers.motifSource === "design") {
          const designPrice = prices.motif_design || 0;
          if (designPrice > 0) {
            const formatted = formatPrice(designPrice, state);
            setupItems.push(
              h(
                "div",
                {
                  style:
                    "display: flex; justify-content: space-between; padding: 8px 0;",
                },
                [
                  h("span", { text: "Designservice" }),
                  h("span", {
                    style: "font-weight: 600",
                    text: formatted.display,
                  }),
                ],
              ),
            );
          }
        }

        // Textservice
        if (state.answers.contentCreateMode === "textservice") {
          const textPrice = prices.textservice || 0;
          if (textPrice > 0) {
            const formatted = formatPrice(textPrice, state);
            setupItems.push(
              h(
                "div",
                {
                  style:
                    "display: flex; justify-content: space-between; padding: 8px 0;",
                },
                [
                  h("span", { text: "Textservice" }),
                  h("span", {
                    style: "font-weight: 600",
                    text: formatted.display,
                  }),
                ],
              ),
            );
          }
        }

        // Gesamt
        const setupFormatted = formatPrice(followupPricing.setup, state);
        setupItems.push(
          h(
            "div",
            {
              style:
                "display: flex; justify-content: space-between; padding: 12px 0; border-top: 2px solid #ddd; margin-top: 8px; font-size: 18px; font-weight: 700",
            },
            [
              h("span", { text: "Gesamt (einmalig)" }),
              h("span", { text: setupFormatted.display }),
            ],
          ),
        );

        blocks.push(renderCard("Einrichtungskosten", null, setupItems));
      }

      // Versandhinweis
      if (followupPricing.shippingNote) {
        blocks.push(
          h("div", {
            class: "sk-alert sk-alert-info",
            text: followupPricing.shippingNote,
          }),
        );
      }
    }
  } else {
    // Standard-Produkte: Detaillierte Rechnung mit 4 Spalten
    const lines = state.quote?.lines || [];
    const priceTable = h("table", { class: "sk-table" }, []);
    priceTable.appendChild(
      h("thead", {}, [
        h("tr", {}, [
          h("th", { text: "Position" }),
          h("th", { text: "Menge", style: "text-align: center;" }),
          h("th", { text: "Preis pro Stück", style: "text-align: right;" }),
          h("th", { text: "Gesamt", style: "text-align: right;" }),
        ]),
      ]),
    );

    const priceBody = h("tbody", {}, []);
    if (lines.length === 0) {
      priceBody.appendChild(
        h("tr", {}, [
          h("td", {
            colspan: "4",
            text: "Preisberechnung folgt nach Bestellung",
          }),
        ]),
      );
    } else {
      // Preis pro Stück für Hauptprodukt mit dynamischer Formel berechnen
      const quantity = state.answers.quantity || 1;
      const pricePerPieceNet = calculatePricePerPiece(state);
      const taxRate =
        (window.SkriftConfigurator?.settings?.prices?.tax_rate || 19) / 100;
      const pricePerPieceGross = pricePerPieceNet * (1 + taxRate);

      for (const ln of lines) {
        const isSubItem = ln.isSubItem || false;
        const isMainProduct = ln.isMainProduct || false;
        // Direktversand-Zeile soll Menge und Gesamtpreis anzeigen (nicht wie normale Sub-Items)
        const isShippingLine =
          ln.isShippingLine ||
          ln.description?.includes("Direktversand") ||
          ln.description?.includes("Sammelversand");
        const rowStyle = isSubItem
          ? "padding-left: 20px; font-size: 14px; color: #666;"
          : "";

        // Bei Privatkunden: Bruttopreise anzeigen, bei Business: Nettopreise
        const unitPrice = isB2B ? ln.unitNet : ln.unitGross;
        const totalPrice = isB2B ? ln.totalNet : ln.totalGross;

        // Position: Bei Add-Ons (SubItems) "inkl." voranstellen
        const positionText = isSubItem
          ? `inkl. ${ln.description}`
          : ln.description;

        // Bei Hauptprodukt: Summierten Preis pro Stück und Gesamtpreis anzeigen
        // Preise auf 2 Dezimalstellen runden für konsistente Anzeige
        const pricePerPieceDisplay = isMainProduct
          ? isB2B
            ? Math.round(pricePerPieceNet * 100) / 100
            : Math.round(pricePerPieceGross * 100) / 100
          : Math.round(unitPrice * 100) / 100;

        // Gesamt = gerundeter Einzelpreis × Menge (damit Menge × Stückpreis = Gesamt stimmt)
        // Sub-Items zeigen normalerweise keinen Gesamtpreis, AUSSER Versand-Zeilen
        const showQuantityAndTotal = !isSubItem || isShippingLine;
        const totalPriceDisplay = isMainProduct
          ? Math.round(pricePerPieceDisplay * quantity * 100) / 100
          : showQuantityAndTotal
            ? Math.round(totalPrice * 100) / 100
            : null;

        const row = h("tr", {}, [
          h("td", { text: positionText, style: rowStyle }),
          h("td", {
            text:
              showQuantityAndTotal && ln.quantity > 0
                ? ln.quantity.toString()
                : "—",
            style: "text-align: center;" + (isSubItem ? " color: #666;" : ""),
          }),
          h("td", {
            text: fmtEUR(pricePerPieceDisplay),
            style: "text-align: right;" + (isSubItem ? " color: #666;" : ""),
          }),
          h("td", {
            text:
              showQuantityAndTotal && totalPriceDisplay !== null
                ? fmtEUR(totalPriceDisplay)
                : "—",
            style: "text-align: right;" + (isSubItem ? " color: #666;" : ""),
          }),
        ]);
        priceBody.appendChild(row);

        // Steuerhinweis bei Versand (0% MwSt Anteil)
        if (ln.taxNote) {
          priceBody.appendChild(
            h("tr", {}, [
              h("td", {
                colspan: "4",
                style: "font-size: 12px; color: #999; padding-left: 40px;",
                text: ln.taxNote,
              }),
            ]),
          );
        }
      }
    }

    // Gutschein-Rabatt anzeigen (falls vorhanden)
    const hasDiscount = state.quote?.discountAmount > 0;

    if (hasDiscount) {
      // Zwischensumme VOR Rabatt
      priceBody.appendChild(
        h("tr", { style: "border-top: 2px solid #ddd;" }, [
          h("td", { text: "Zwischensumme", colspan: "3" }),
          h("td", {
            text: fmtEUR(state.quote?.totalBeforeDiscount || 0),
            style: "text-align: right;",
          }),
        ]),
      );

      // Rabatt-Zeile
      const voucherLabel =
        state.quote?.voucher?.type === "percent"
          ? `Gutschein (-${state.quote.voucher.value}%)`
          : `Gutschein`;

      priceBody.appendChild(
        h("tr", { style: "color: #2e7d32; font-weight: 600;" }, [
          h("td", { text: voucherLabel, colspan: "3" }),
          h("td", {
            text: "-" + fmtEUR(state.quote?.discountAmount || 0),
            style: "text-align: right;",
          }),
        ]),
      );
    }

    if (isB2B) {
      // Business: Netto + MwSt getrennt
      priceBody.appendChild(
        h(
          "tr",
          {
            style:
              "font-weight: 700; border-top: " +
              (hasDiscount ? "1px solid #ddd" : "2px solid #ddd") +
              ";",
          },
          [
            h("td", { text: "Gesamtpreis (zzgl. MwSt.)", colspan: "3" }),
            h("td", {
              text: fmtEUR(state.quote?.subtotalNet || 0),
              style: "text-align: right;",
            }),
          ],
        ),
      );

      priceBody.appendChild(
        h("tr", { style: "font-weight: 700; font-size: 16px" }, [
          h("td", { text: "Gesamtpreis (inkl. MwSt.)", colspan: "3" }),
          h("td", {
            text: fmtEUR(state.quote?.totalGross || 0),
            style: "text-align: right;",
          }),
        ]),
      );

      // MwSt. Ausweis unter Gesamtpreis (inkl. MwSt.)
      priceBody.appendChild(
        h("tr", { style: "font-size: 14px; color: #666;" }, [
          h("td", { text: "enthaltene MwSt. 19%", colspan: "3" }),
          h("td", {
            text: fmtEUR(state.quote?.vatAmount || 0),
            style: "text-align: right;",
          }),
        ]),
      );
    } else {
      // Privatkunde: Gesamtpreis + MwSt. Ausweis darunter
      priceBody.appendChild(
        h(
          "tr",
          {
            style:
              "font-weight: 700; font-size: 16px; border-top: " +
              (hasDiscount ? "1px solid #ddd" : "2px solid #ddd") +
              ";",
          },
          [
            h("td", { text: "Gesamtpreis (inkl. MwSt.)", colspan: "3" }),
            h("td", {
              text: fmtEUR(state.quote?.totalGross || 0),
              style: "text-align: right;",
            }),
          ],
        ),
      );

      // MwSt. Ausweis unter Gesamtpreis
      priceBody.appendChild(
        h("tr", { style: "font-size: 14px; color: #666;" }, [
          h("td", { text: "enthaltene MwSt. 19%", colspan: "3" }),
          h("td", {
            text: fmtEUR(state.quote?.vatAmount || 0),
            style: "text-align: right;",
          }),
        ]),
      );
    }

    priceTable.appendChild(priceBody);

    // Gutschein-Bereich
    const voucherCode = state.order?.voucherCode || "";
    const voucherStatus = state.order?.voucherStatus || null;
    const showVoucherInput = state.order?.showVoucherInput || false;

    const voucherSection = [];

    if (!showVoucherInput && !voucherStatus?.valid) {
      // Zeige klickbaren Link
      voucherSection.push(
        h("a", {
          style:
            "margin-top: 15px; display: block; text-decoration: underline; color: #999; font-size: 13px; cursor: pointer;",
          text: "Gutschein oder Aktionscode?",
          onclick: (e) => {
            e.preventDefault();
            dispatch({
              type: "SET_ORDER",
              patch: { showVoucherInput: true },
            });
          },
        }),
      );
    } else if (showVoucherInput || voucherStatus?.valid) {
      // Zeige Eingabefeld
      voucherSection.push(
        h(
          "div",
          {
            style:
              "margin-top: 15px; padding-top: 15px; border-top: 1px solid #e0e0e0;",
          },
          [
            h(
              "div",
              {
                style: "display: flex; gap: 10px; align-items: flex-start;",
              },
              [
                h("input", {
                  type: "text",
                  class: "sk-input",
                  style: "flex: 1; text-transform: uppercase;",
                  placeholder: "Gutschein- oder Aktionscode eingeben",
                  value: voucherCode,
                  disabled: voucherStatus?.valid,
                  "data-sk-focus": "voucher.code",
                  oninput: (e) => {
                    dispatch({
                      type: "SET_ORDER",
                      patch: {
                        voucherCode: e.target.value.toUpperCase(),
                        voucherStatus: null,
                      },
                    });
                  },
                }),
                voucherStatus?.valid
                  ? h("button", {
                      type: "button",
                      class: "sk-btn sk-btn-secondary",
                      text: "Entfernen",
                      onclick: () => {
                        dispatch({
                          type: "SET_ORDER",
                          patch: {
                            voucherCode: "",
                            voucherStatus: null,
                            showVoucherInput: false,
                          },
                        });
                      },
                    })
                  : h("button", {
                      type: "button",
                      class: "sk-btn sk-btn-secondary",
                      text: "Einlösen",
                      onclick: () => validateVoucherCode(voucherCode, dispatch),
                    }),
              ],
            ),
            voucherStatus
              ? h("div", {
                  class: voucherStatus.valid ? "sk-help" : "sk-error-message",
                  style: `margin-top: 8px; color: ${
                    voucherStatus.valid ? "#2e7d32" : "#d32f2f"
                  };`,
                  text: voucherStatus.valid
                    ? `✓ ${voucherStatus.message}`
                    : `✗ ${voucherStatus.error}`,
                })
              : null,
          ].filter(Boolean),
        ),
      );
    }

    const priceCardContent = [priceTable, ...voucherSection];

    // Preis-Card mit spezieller Klasse für noPrice-Modus
    const priceCard = renderCard("Preis", null, priceCardContent);
    priceCard.classList.add("sk-price-card");
    blocks.push(priceCard);
  }

  // Gutschein ist jetzt für alle Produkte in der Preis-Card integriert (siehe oben)

  // Alternative Lieferadresse (falls vorhanden)
  if (state.order.shippingDifferent) {
    const sh = state.order.shipping;
    const shippingDataRows = [
      ["Vorname", sh.firstName || ""],
      ["Nachname", sh.lastName || ""],
    ];

    if (state.answers.customerType === "business" && sh.company) {
      shippingDataRows.push(["Unternehmen", sh.company]);
    }

    shippingDataRows.push(
      ["Straße und Hausnummer", sh.street || ""],
      ["PLZ", sh.zip || ""],
      ["Stadt", sh.city || ""],
      ["Land", sh.country || "Deutschland"],
    );

    const shippingDataTable = h("table", { class: "sk-table" }, []);
    const shippingDataBody = h("tbody", {}, []);
    for (const [k, v] of shippingDataRows) {
      shippingDataBody.appendChild(
        h("tr", {}, [h("td", { text: k }), h("td", { text: v })]),
      );
    }
    shippingDataTable.appendChild(shippingDataBody);

    blocks.push(renderCard("Lieferadresse", null, [shippingDataTable]));
  }

  // Rechtliches mit Bestellbutton
  blocks.push(
    renderCard("Rechtliches", null, [
      h(
        "label",
        {
          class: "sk-option",
          style: "margin-bottom: 12px",
          onclick: (e) => e.stopPropagation(),
        },
        [
          h("input", {
            type: "checkbox",
            id: "sk-agb-checkbox",
            checked: !!state.order.acceptedAgb,
            onclick: (e) => e.stopPropagation(),
            onchange: (e) => {
              e.stopPropagation();
              dispatch({
                type: "SET_ORDER",
                patch: { acceptedAgb: e.target.checked },
              });
            },
          }),
          h("div", { class: "sk-option-content" }, [
            h("div", { class: "sk-option-label" }, [
              document.createTextNode("Ich habe die "),
              h("a", {
                href: "https://skrift.de/agb/",
                target: "_blank",
                rel: "noopener noreferrer",
                text: "Allgemeinen Geschäftsbedingungen",
                onclick: (e) => e.stopPropagation(),
              }),
              document.createTextNode(
                " gelesen und akzeptiere deren Geltung. Ein Widerrufsrecht besteht gemäß § 312g Abs. 2 Nr. 1 BGB nicht, da Skrift ausschließlich Waren anbietet, die nicht vorgefertigt sind und für deren Herstellung eine individuelle Auswahl oder Bestimmung durch den Kunden maßgeblich ist oder die eindeutig auf die persönlichen Bedürfnisse des Kunden zugeschnitten sind.",
              ),
            ]),
          ]),
        ],
      ),
      h("label", { class: "sk-option", onclick: (e) => e.stopPropagation() }, [
        h("input", {
          type: "checkbox",
          id: "sk-privacy-checkbox",
          checked: !!state.order.acceptedPrivacy,
          onclick: (e) => e.stopPropagation(),
          onchange: (e) => {
            e.stopPropagation();
            dispatch({
              type: "SET_ORDER",
              patch: { acceptedPrivacy: e.target.checked },
            });
          },
        }),
        h("div", { class: "sk-option-content" }, [
          h("div", { class: "sk-option-label" }, [
            document.createTextNode("Ja, ich habe die "),
            h("a", {
              href: "https://skrift.de/datenschutz/",
              target: "_blank",
              rel: "noopener noreferrer",
              text: "Datenschutzerklärung",
              onclick: (e) => e.stopPropagation(),
            }),
            document.createTextNode(
              " zur Kenntnis genommen und bin damit einverstanden, dass die von mir angegebenen Daten elektronisch erhoben und gespeichert werden. Meine Daten werden dabei nur streng zweckgebunden zur Bearbeitung und Beantwortung meiner Anfrage benutzt. Mit dem Absenden des Kontaktformulars erkläre ich mich mit der Verarbeitung einverstanden. Die Daten werden im Falle eines ausbleibenden Auftrags gelöscht.",
            ),
          ]),
        ]),
      ]),
      // Bestellbutton - für Privatkunden mit PayPal oder normaler Button
      renderOrderButton(state),
    ]),
  );

  return h("div", { class: "sk-stack" }, blocks);
}

/**
 * Rendert den Bestellbutton basierend auf Kundentyp und PayPal-Konfiguration
 */
function renderOrderButton(state) {
  const isB2B = state.answers?.customerType === "business";
  const paypalConfig = window.SkriftConfigurator?.paypal || {};
  const isPayPalEnabled = paypalConfig.enabled && paypalConfig.client_id;
  const isNoPrice = state.noPrice || false;

  // Geschäftskunden, PayPal nicht aktiviert, oder noPrice-Modus: Normaler Button
  if (isB2B || !isPayPalEnabled || isNoPrice) {
    return h("button", {
      type: "button",
      class: "sk-btn sk-btn-primary sk-btn-large",
      style: "width: 100%; margin-top: 20px;",
      disabled: !validateStep(state),
      onclick: () => handleOrderSubmit(state),
      text: "Jetzt kostenpflichtig bestellen",
    });
  }

  // Prüfen ob AGB und Datenschutz akzeptiert wurden
  const agbAccepted = state.order?.acceptedAgb || false;
  const privacyAccepted = state.order?.acceptedPrivacy || false;
  const isValid = agbAccepted && privacyAccepted;

  // Privatkunden mit PayPal: PayPal-Button-Container
  const container = h(
    "div",
    {
      style: "margin-top: 20px; position: relative;",
    },
    [
      h("div", {
        id: "paypal-button-container",
        style: `min-height: 50px; ${
          !isValid ? "opacity: 0.5; pointer-events: none;" : ""
        }`,
      }),
      h("div", {
        class: "sk-paypal-loading",
        style: "text-align: center; padding: 15px; color: #666;",
        text: "PayPal wird geladen...",
      }),
      // Hinweis wenn Checkboxen nicht aktiviert
      !isValid
        ? h("div", {
            style:
              "text-align: center; padding: 10px; color: #dc2626; font-size: 14px; margin-top: 5px;",
            text: "Bitte akzeptieren Sie die AGB und Datenschutzerklärung, um fortzufahren.",
          })
        : null,
    ].filter(Boolean),
  );

  // PayPal SDK laden und Button initialisieren
  loadPayPalSDK(paypalConfig.client_id)
    .then(() => {
      initPayPalButton(state);
    })
    .catch((err) => {
      console.error("[PayPal] SDK load failed:", err);
      const loadingEl = document.querySelector(".sk-paypal-loading");
      if (loadingEl) {
        loadingEl.innerHTML =
          "PayPal konnte nicht geladen werden. Bitte versuchen Sie es später erneut.";
        loadingEl.style.color = "#dc2626";
      }
    });

  return container;
}

/**
 * Lädt die PayPal SDK dynamisch
 */
let paypalSDKLoaded = false;
let paypalSDKPromise = null;

function loadPayPalSDK(clientId) {
  if (paypalSDKLoaded) {
    return Promise.resolve();
  }

  if (paypalSDKPromise) {
    return paypalSDKPromise;
  }

  paypalSDKPromise = new Promise((resolve, reject) => {
    const script = document.createElement("script");
    // SDK URL - einfache Version ohne buyer-country (das verursacht 400 Fehler)
    script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}&currency=EUR&intent=capture&disable-funding=venmo,paylater,credit`;
    script.async = true;

    script.onload = () => {
      paypalSDKLoaded = true;
      resolve();
    };

    script.onerror = () => {
      paypalSDKPromise = null;
      reject(new Error("Failed to load PayPal SDK"));
    };

    document.head.appendChild(script);
  });

  return paypalSDKPromise;
}

/**
 * Initialisiert den PayPal-Button mit Client-Side Integration
 * Keine Backend-Aufrufe nötig - alles läuft direkt über PayPal API
 */
function initPayPalButton(state) {
  const container = document.getElementById("paypal-button-container");
  const loadingEl = document.querySelector(".sk-paypal-loading");

  if (!container) {
    console.error("[PayPal] Button container not found");
    return;
  }

  // Loading-Text entfernen
  if (loadingEl) {
    loadingEl.style.display = "none";
  }

  // Prüfen ob Button bereits existiert
  if (container.hasChildNodes()) {
    return;
  }

  if (!window.paypal) {
    console.error("[PayPal] SDK not available");
    return;
  }

  window.paypal
    .Buttons({
      style: {
        shape: "rect",
        layout: "vertical",
        color: "blue",
        label: "paypal",
      },

      // Bestellung direkt über PayPal API erstellen (Client-Side)
      createOrder(data, actions) {
        const currentState = window.currentGlobalState;

        // State muss vorhanden sein
        if (!currentState) {
          alert(
            "Fehler: State nicht verfügbar. Bitte laden Sie die Seite neu.",
          );
          return Promise.reject(new Error("State nicht verfügbar"));
        }

        // Checkbox-Werte direkt aus dem DOM lesen als Fallback
        const agbCheckbox = document.getElementById("sk-agb-checkbox");
        const privacyCheckbox = document.getElementById("sk-privacy-checkbox");

        const agbAccepted =
          currentState.order?.acceptedAgb || agbCheckbox?.checked;
        const privacyAccepted =
          currentState.order?.acceptedPrivacy || privacyCheckbox?.checked;

        // Validierung prüfen - spezifische Fehlermeldung
        if (!agbAccepted) {
          alert("Bitte akzeptieren Sie die Allgemeinen Geschäftsbedingungen.");
          return Promise.reject(new Error("AGB nicht akzeptiert"));
        }
        if (!privacyAccepted) {
          alert("Bitte akzeptieren Sie die Datenschutzerklärung.");
          return Promise.reject(new Error("Datenschutz nicht akzeptiert"));
        }

        const quote = currentState.quote || {};
        const total = quote.totalGross || 0;

        if (total <= 0) {
          alert(
            "Ungültiger Bestellbetrag. Bitte konfigurieren Sie Ihre Bestellung.",
          );
          return Promise.reject(new Error("Ungültiger Bestellbetrag"));
        }

        // Betrag auf 2 Dezimalstellen formatieren
        const formattedTotal = parseFloat(total).toFixed(2);

        // Produktname für PayPal
        const productName =
          currentState.ctx?.product?.label || "Skrift Handschriftservice";
        const quantity = currentState.answers?.quantity || 1;

        return actions.order.create({
          intent: "CAPTURE",
          purchase_units: [
            {
              amount: {
                currency_code: "EUR",
                value: formattedTotal,
              },
              description: `${quantity}x ${productName}`,
            },
          ],
          application_context: {
            brand_name: "Skrift",
            locale: "de-DE",
            shipping_preference: "NO_SHIPPING",
            user_action: "PAY_NOW",
          },
        });
      },

      // Zahlung direkt über PayPal API erfassen (Client-Side)
      onApprove(data, actions) {
        return actions.order.capture().then(function (orderData) {
          // Erfolgreiche Transaktion
          const transaction =
            orderData?.purchase_units?.[0]?.payments?.captures?.[0];

          if (transaction?.status === "COMPLETED") {
            // Webhook aufrufen und weiterleiten
            handlePayPalSuccess(window.currentGlobalState || state, orderData);
          } else {
            alert(
              "Zahlung konnte nicht abgeschlossen werden. Bitte versuchen Sie es erneut.",
            );
          }
        });
      },

      // Zahlung abgebrochen
      onCancel() {
        alert("Zahlung wurde abgebrochen.");
      },

      // Fehler
      onError(err) {
        console.error("[PayPal] Error:", err);
        alert(
          "Bei der Zahlung ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.",
        );
      },
    })
    .render("#paypal-button-container");
}

/**
 * Behandelt erfolgreiche PayPal-Zahlung
 */
async function handlePayPalSuccess(state, paypalDetails) {
  const backend = window.SkriftConfigurator?.settings?.backend_connection || {};
  const webhookUrlPrivate = backend.webhook_url_private;
  const redirectUrlPrivate = backend.redirect_url_private;

  // Bestellnummer generieren (fortlaufend vom WP-Backend)
  const api = window.SkriftBackendAPI;
  const orderNumber = api ? await api.generateOrderNumber() : `S-${Date.now()}`;

  // Motiv hochladen wenn vorhanden
  const motifUrl = await uploadMotifIfNeeded(state, orderNumber);
  if (motifUrl) {
    state.answers.motifFileUrl = motifUrl;
  }

  // Gutschein als verwendet markieren (falls vorhanden)
  const voucherCode = state.order?.voucherStatus?.valid
    ? state.order.voucherCode
    : null;
  if (voucherCode) {
    try {
      const restUrl = window.SkriftConfigurator?.restUrl || "/wp-json/";
      await fetch(restUrl + "skrift/v1/voucher/use", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ code: voucherCode }),
      });
    } catch (error) {
      // Fehler beim Markieren des Gutscheins - trotzdem fortfahren
    }
  }

  // Bestellung finalisieren: Preview-Dateien aus Cache in Output-Ordner kopieren
  let finalizeResult = null;
  if (api && api.sessionId) {
    try {
      finalizeResult = await api.finalizeOrder(api.sessionId, orderNumber, {
        customer: state.order,
        payment: {
          method: "paypal",
          transaction_id: paypalDetails.id,
          payer_email: paypalDetails.payer?.email_address,
          status: paypalDetails.status,
        },
        quote: state.quote,
      });
      console.log("[PayPal] Finalize result:", finalizeResult);
    } catch (error) {
      console.error("[PayPal] Finalize error:", error);
    }
  } else {
    console.warn("[PayPal] Cannot finalize - no API or session available");
  }

  // Webhook für Privatkunden mit PayPal-Details aufrufen
  if (webhookUrlPrivate) {
    try {
      const orderData = {
        order_number: orderNumber,
        customer_type: state.answers.customerType,
        product: state.ctx?.product?.key,
        quantity: state.answers.quantity,
        format: state.answers.format,
        shipping_mode: state.answers.shippingMode,
        envelope: state.answers.envelope,
        envelope_mode: state.answers.envelopeMode,
        customer_data: state.order,
        quote: state.quote,
        timestamp: new Date().toISOString(),
        payment: {
          method: "paypal",
          transaction_id: paypalDetails.id,
          payer_email: paypalDetails.payer?.email_address,
          status: paypalDetails.status,
        },
        finalize_result: finalizeResult,
      };

      const response = await fetch(webhookUrlPrivate, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(orderData),
      });

      if (!response.ok) {
        console.error("[PayPal] Webhook failed:", response.status);
      }
    } catch (error) {
      console.error("[PayPal] Webhook error:", error);
    }
  }

  // Weiterleitung für Privatkunden
  if (redirectUrlPrivate) {
    window.location.href = redirectUrlPrivate;
  } else {
    alert(
      "Vielen Dank für Ihre Zahlung! Ihre Bestellung wurde erfolgreich aufgenommen. Sie erhalten in Kürze eine Bestätigungs-E-Mail.",
    );
  }
}

// Helper: CSV
function parseCsv(text) {
  const raw = String(text || "").trim();
  if (!raw) return [];
  const lines = raw.split(/\r?\n/).filter((l) => l.trim().length > 0);
  const sample = lines[0];
  const delim = sample.includes(";") ? ";" : ",";

  return lines.map((ln) => {
    const cells = ln.split(delim).map((c) => {
      let value = c.trim();

      // CSV Injection Prevention: Entferne gefährliche Zeichen am Anfang
      // Dies verhindert Formula Injection in Excel/LibreOffice
      if (value.length > 0 && /^[=+\-@]/.test(value)) {
        value = "'" + value; // Prefix mit ' um als Text zu markieren
      }

      return value;
    });
    return cells;
  });
}

function escapeCsvValue(value) {
  let str = String(value || "");

  // CSV Injection Prevention: Entferne gefährliche Zeichen am Anfang
  // Dies verhindert Formula Injection in Excel/LibreOffice
  if (str.length > 0 && /^[=+\-@]/.test(str)) {
    str = "'" + str; // Prefix mit ' um als Text zu markieren
  }

  // Semikolon und Anführungszeichen escapen
  if (str.includes(";") || str.includes('"') || str.includes("\n")) {
    return '"' + str.replaceAll('"', '""') + '"';
  }
  return str;
}

function rowsToCsv(rows) {
  const header = [
    "vorname",
    "nachname",
    "straße",
    "hausnummer",
    "plz",
    "stadt",
    "land",
  ];
  const lines = [header.join(";")];
  for (const r of rows) {
    lines.push(
      [
        r.firstName || "",
        r.lastName || "",
        r.street || "",
        r.houseNumber || "",
        r.zip || "",
        r.city || "",
        r.country || "",
      ]
        .map((v) => escapeCsvValue(v))
        .join(";"),
    );
  }
  return lines.join("\n");
}

function downloadText(filename, text) {
  const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);
}

// Generische Tabellen-Modal Funktion
// Diese Funktion erstellt ein Modal mit einer Tabelle, die Import/Export unterstützt
// und sich automatisch nach einem Import aktualisiert.
//
// config Parameter:
// - title: Titel des Modals
// - columns: Array von {key, label} Objekten
// - getData: Funktion die den aktuellen State nimmt und die Daten zurückgibt (Array von Objekten)
// - setData: Funktion die dispatch und neue Daten nimmt und den State aktualisiert
// - rowCount: Anzahl der Zeilen
// - exportFilename: Dateiname für CSV Export
// - helpText: Optionaler Hilfetext unter der Tabelle
// - getStateFunc: Funktion die den aktuellen State zurückgibt (wichtig für Re-Rendering!)
function createTableModal(dispatch, config) {
  let tableWrapper;
  let currentState = config.getStateFunc();

  // State-Referenz aktualisieren (wird nach jedem Dispatch aufgerufen)
  const updateState = () => {
    currentState = config.getStateFunc();
  };

  // Render-Funktion die die Tabelle neu zeichnet (muss vor buildTable definiert werden)
  const renderTable = () => {
    requestAnimationFrame(() => {
      const oldTable = tableWrapper.querySelector("table");
      if (oldTable) oldTable.remove();
      tableWrapper.appendChild(buildTable());
    });
  };

  // Baut die Tabelle mit den aktuellen Daten
  function buildTable() {
    updateState(); // State aktualisieren vor dem Rendern
    const data = config.getData(currentState);
    const rowCount = config.rowCount(currentState);

    const table = h(
      "table",
      { class: "sk-table sk-table-pasteable", tabindex: "0" },
      [],
    );

    // Header (Fragment verwenden für bessere Performance)
    const headerCells = [
      h("th", { text: "Nr.", class: "sk-table-row-number" }),
    ];
    config.columns.forEach((col) => {
      const attrs = { text: col.label };
      if (col.readOnly) {
        attrs.class = "sk-table-readonly-header";
      }
      headerCells.push(h("th", attrs));
    });
    table.appendChild(h("thead", {}, [h("tr", {}, headerCells)]));

    // Body - Batch DOM updates
    const tbody = h("tbody", {}, []);
    const rows = [];

    for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
      const rowData = data[rowIdx] || {};
      const cells = [
        h("td", { text: String(rowIdx + 1), class: "sk-table-row-number" }),
      ];

      config.columns.forEach((col, colIdx) => {
        const value = rowData[col.key] || "";
        const cellAttrs = {};
        if (col.readOnly) {
          cellAttrs.class = "sk-table-readonly-cell";
        }

        // Optimierung: Input Handler mit direktem Dispatch ohne komplette Daten-Kopie
        cells.push(
          h("td", cellAttrs, [
            h("input", {
              class: "sk-input",
              type: "text",
              value: value,
              placeholder: col.placeholder || "",
              readonly: col.readOnly || false,
              "data-row": String(rowIdx),
              "data-col": String(colIdx),
              "data-key": col.key,
              "data-sk-focus": `modal.${col.key}.${rowIdx}`,
              oninput: col.readOnly
                ? null
                : (e) => {
                    // Scroll-Position VOR dem dispatch speichern
                    const modalContent = e.target.closest(".sk-modal-content");
                    const scrollTop = modalContent ? modalContent.scrollTop : 0;
                    const cursorPos = e.target.selectionStart;
                    const inputValue = e.target.value;

                    updateState();
                    const newData = config
                      .getData(currentState)
                      .map((r) => ({ ...r }));
                    if (!newData[rowIdx]) newData[rowIdx] = {};
                    newData[rowIdx][col.key] = inputValue;
                    config.setData(dispatch, newData);

                    // Fokus und Scroll-Position nach Render wiederherstellen
                    setTimeout(() => {
                      const input = document.querySelector(
                        `input[data-row="${rowIdx}"][data-key="${col.key}"]`,
                      );
                      if (input) {
                        input.focus({ preventScroll: true });
                        input.setSelectionRange(cursorPos, cursorPos);

                        // Modal Scroll-Position wiederherstellen
                        const modal = input.closest(".sk-modal-content");
                        if (modal) {
                          modal.scrollTop = scrollTop;
                        }
                      }
                    }, 0);
                  },
            }),
          ]),
        );
      });

      rows.push(h("tr", {}, cells));
    }

    // Batch append mit DocumentFragment für maximale Performance
    const fragment = document.createDocumentFragment();
    rows.forEach((row) => fragment.appendChild(row));
    tbody.appendChild(fragment);
    table.appendChild(tbody);

    // Excel Paste Handler mit automatischer Tabellen-Aktualisierung
    table.addEventListener("paste", (e) => {
      e.preventDefault();
      const text = e.clipboardData.getData("text/plain");

      if (!text || !text.trim()) return;

      const rows = text.split(/\r?\n/).filter((r) => r.trim());
      if (rows.length === 0) return;

      const activeInput = document.activeElement;
      if (!activeInput || !activeInput.classList.contains("sk-input")) return;

      const startRow = parseInt(activeInput.dataset.row || "0");
      const startCol = parseInt(activeInput.dataset.col || "0");

      updateState();
      const currentData = config.getData(currentState);
      const currentRowCount = config.rowCount(currentState);
      const newData = currentData.map((r) => ({ ...r }));

      // Sicherstellen dass genug Zeilen existieren
      while (newData.length < currentRowCount) {
        newData.push({});
      }

      let pastedCells = 0;
      rows.forEach((rowText, rowOffset) => {
        const cells = rowText.split("\t");
        cells.forEach((cellValue, colOffset) => {
          const targetRow = startRow + rowOffset;
          const targetCol = startCol + colOffset;

          if (
            targetRow < currentRowCount &&
            targetCol < config.columns.length
          ) {
            const col = config.columns[targetCol];
            if (!col.readOnly) {
              if (!newData[targetRow]) newData[targetRow] = {};
              newData[targetRow][col.key] = cellValue.trim();
              pastedCells++;
            }
          }
        });
      });

      if (pastedCells > 0) {
        config.setData(dispatch, newData);

        // Tabelle im Modal aktualisieren
        renderTable();
      }
    });

    return table;
  }

  // CSV Export
  function exportCsv() {
    updateState();
    const data = config.getData(currentState);
    const headers = config.columns.map((col) => col.label).join(";");
    const rows = data.map((row) =>
      config.columns.map((col) => escapeCsvValue(row[col.key] || "")).join(";"),
    );
    const csv = [headers, ...rows].join("\n");
    downloadText(config.exportFilename, csv);
  }

  // CSV Import
  async function handleImport(file) {
    if (!file) return;

    const text = await file.text();
    const parsed = parseCsv(text);

    if (parsed.length === 0) {
      alert("Die CSV-Datei ist leer.");
      return;
    }

    // Strikte Header-Validierung
    let startRow = 0;
    let headerValid = false;

    if (parsed.length > 0 && parsed[0].length > 0) {
      const firstRow = parsed[0];

      // Prüfe ob erste Zeile wie eine Header-Zeile aussieht
      const commonHeaders = [
        "vorname",
        "nachname",
        "name",
        "straße",
        "strasse",
        "plz",
        "stadt",
        "land",
        "nr",
        "ort",
      ];
      const hasCommonHeaders = firstRow.some((cell) => {
        const lower = cell.toLowerCase().trim();
        return commonHeaders.some((header) => lower.includes(header));
      });

      const hasPlaceholderSyntax = firstRow.some(
        (cell) => cell.includes("[[") && cell.includes("]]"),
      );

      const looksLikeHeader = hasCommonHeaders || hasPlaceholderSyntax;

      if (looksLikeHeader) {
        // Validiere die Spaltenüberschriften
        const editableColumns = config.columns.filter((col) => !col.readOnly);

        // Prüfe ob alle erwarteten Spalten vorhanden sind
        let matchCount = 0;
        const expectedHeaders = editableColumns.map((col) => {
          const labelCleaned = col.label
            .replace(/\[\[|\]\]/g, "")
            .toLowerCase()
            .trim();
          return {
            key: col.key.toLowerCase(),
            label: labelCleaned,
            original: col.label,
          };
        });

        for (
          let i = 0;
          i < Math.min(firstRow.length, config.columns.length);
          i++
        ) {
          const cellLower = firstRow[i].toLowerCase().trim();
          const col = config.columns[i];

          if (col.readOnly) continue; // Überspringe read-only Spalten

          const labelCleaned = col.label
            .replace(/\[\[|\]\]/g, "")
            .toLowerCase()
            .trim();
          const keyLower = col.key.toLowerCase();

          // Exakte oder ähnliche Übereinstimmung
          if (
            cellLower === keyLower ||
            cellLower === labelCleaned ||
            cellLower.includes(labelCleaned) ||
            labelCleaned.includes(cellLower)
          ) {
            matchCount++;
          }
        }

        // Header ist gültig wenn mindestens 50% der editierbaren Spalten übereinstimmen
        const requiredMatches = Math.ceil(editableColumns.length * 0.5);
        headerValid = matchCount >= requiredMatches;

        if (headerValid) {
          startRow = 1;
        } else {
          // Header-Zeile erkannt aber ungültig
          const expectedHeaderNames = expectedHeaders
            .map((h) => h.original)
            .join(", ");
          const actualHeaderNames = firstRow.join(", ");

          alert(
            `Die Spaltenüberschriften stimmen nicht überein.\n\n` +
              `Erwartet: ${expectedHeaderNames}\n\n` +
              `Gefunden: ${actualHeaderNames}\n\n` +
              `Bitte stellen Sie sicher, dass die CSV-Datei die richtigen Spaltenüberschriften hat.`,
          );
          return;
        }
      }
    }

    // Prüfe ob genug Datenzeilen vorhanden sind
    if (parsed.length <= startRow) {
      alert("Die CSV-Datei enthält keine Datenzeilen.");
      return;
    }

    updateState();
    const rowCount = config.rowCount(currentState);
    const newData = [];

    for (let i = 0; i < rowCount; i++) {
      const row = {};
      const sourceRow = parsed[startRow + i];
      if (sourceRow) {
        config.columns.forEach((col, colIdx) => {
          if (!col.readOnly) {
            row[col.key] = sourceRow[colIdx] || "";
          }
        });
      }
      newData.push(row);
    }

    config.setData(dispatch, newData);

    // Tabelle neu rendern nach Import (requestAnimationFrame für bessere Performance)
    requestAnimationFrame(() => renderTable());
  }

  const fileInput = h("input", {
    type: "file",
    accept: ".csv,text/csv",
    style: "display: none;",
    onchange: async (e) => {
      const f = e.target.files && e.target.files[0];
      await handleImport(f);
      e.target.value = "";
    },
  });

  const actions = h(
    "div",
    { class: "sk-inline", style: "margin-bottom: 16px;" },
    [
      fileInput,
      h("button", {
        type: "button",
        class: "sk-btn",
        text: "CSV importieren",
        onclick: () => fileInput.click(),
      }),
      h("button", {
        type: "button",
        class: "sk-btn",
        text: "CSV exportieren",
        onclick: exportCsv,
      }),
    ],
  );

  tableWrapper = h("div", { class: "sk-table-wrapper-modal" }, [buildTable()]);

  const modalContent = h("div", { class: "sk-modal-content" }, [
    h("div", { class: "sk-modal-header" }, [
      h("h3", { text: config.title }),
      h("button", {
        type: "button",
        class: "sk-modal-close",
        text: "×",
        onclick: () => modal.remove(),
      }),
    ]),
    h(
      "div",
      { class: "sk-modal-body" },
      [
        config.infoText
          ? h("div", {
              class: "sk-alert sk-alert-info",
              style: "margin-bottom: 16px; font-size: 13px;",
              text: config.infoText,
            })
          : null,
        actions,
        tableWrapper,
        config.helpText
          ? h("div", {
              class: "sk-help",
              style: "margin-top: 12px;",
              text: config.helpText,
            })
          : null,
      ].filter((x) => x !== null),
    ),
  ]);

  const modal = h(
    "div",
    {
      class: "sk-modal",
      onclick: (e) => {
        if (e.target.classList.contains("sk-modal")) modal.remove();
      },
    },
    [modalContent],
  );

  const configuratorElement =
    document.querySelector(".sk-configurator") || document.body;
  configuratorElement.appendChild(modal);

  // Focus auf erste editierbare Zelle
  setTimeout(() => {
    const firstInput = tableWrapper.querySelector("input:not([readonly])");
    if (firstInput) firstInput.focus();
  }, 100);
}

// Helper: Empfänger Tabelle
function renderRecipientsTable(state, dispatch) {
  const addressMode = state.addressMode || "classic";
  const qty = Number(state.answers.quantity || 0);
  const want = qty > 0 ? qty : 0;
  const isDirectShipping = state.answers.shippingMode === "direct";

  // Klassische Adresstabelle
  function buildClassicTable(currentState) {
    const rows = Array.isArray(currentState.recipientRows)
      ? currentState.recipientRows
      : [];

    const table = h(
      "table",
      { class: "sk-table sk-table-pasteable", tabindex: "0" },
      [],
    );
    // Rows-Referenz am Table speichern für Event-Handler
    table._rows = rows;

    table.appendChild(
      h("thead", {}, [
        h("tr", {}, [
          h("th", { text: "Nr.", class: "sk-table-row-number" }),
          h("th", { text: "Vorname" }),
          h("th", { text: "Nachname" }),
          h("th", { text: "Straße" }),
          h("th", { text: "Nr." }),
          h("th", { text: "PLZ" }),
          h("th", { text: "Stadt" }),
          h("th", { text: "Land" }),
        ]),
      ]),
    );

    const tbody = h("tbody", {}, []);
    for (let idx = 0; idx < want; idx++) {
      const r = rows[idx] || {};
      const cell = (key, placeholder = "") =>
        h("td", {}, [
          h("input", {
            class: "sk-input",
            type: "text",
            value: r[key] || "",
            placeholder,
            "data-row": idx,
            "data-col": key,
            "data-sk-focus": `recipient.${key}.${idx}`,
            oninput: (e) => {
              const currentRows = table._rows;
              if (!currentRows[idx]) {
                currentRows[idx] = {
                  firstName: "",
                  lastName: "",
                  street: "",
                  houseNumber: "",
                  zip: "",
                  city: "",
                  country: isDirectShipping ? "Deutschland" : "",
                };
              }
              currentRows[idx][key] = e.target.value;
            },
          }),
        ]);

      const countryCell = h("td", {}, [
        h("input", {
          class: "sk-input",
          type: "text",
          value: r.country || (isDirectShipping ? "Deutschland" : ""),
          placeholder: isDirectShipping ? "Deutschland" : "",
          "data-row": idx,
          "data-col": "country",
          "data-sk-focus": `recipient.country.${idx}`,
          oninput: (e) => {
            const currentRows = table._rows;
            if (!currentRows[idx]) {
              currentRows[idx] = {
                firstName: "",
                lastName: "",
                street: "",
                houseNumber: "",
                zip: "",
                city: "",
                country: isDirectShipping ? "Deutschland" : "",
              };
            }
            currentRows[idx].country = e.target.value;
          },
        }),
      ]);

      tbody.appendChild(
        h("tr", {}, [
          h("td", { text: String(idx + 1), class: "sk-table-row-number" }),
          cell("firstName"),
          cell("lastName"),
          cell("street"),
          cell("houseNumber"),
          cell("zip"),
          cell("city"),
          countryCell,
        ]),
      );
    }
    table.appendChild(tbody);

    // Focusout-Handler mit Debounce um Flackern zu vermeiden
    let focusoutTimer = null;
    let hasLocalChanges = false; // Track ob lokale Änderungen gemacht wurden
    table.addEventListener("focusout", (e) => {
      if (focusoutTimer) clearTimeout(focusoutTimer);
      focusoutTimer = setTimeout(() => {
        const newFocus = document.activeElement;
        if (!table.contains(newFocus) && hasLocalChanges) {
          // Nur dispatchen wenn lokale Änderungen gemacht wurden
          dispatch({ type: "SET_RECIPIENT_ROWS", rows: [...table._rows] });
          hasLocalChanges = false;
        }
      }, 150);
    });

    // Änderungen tracken bei Input
    table.addEventListener("input", () => {
      hasLocalChanges = true;
    });

    // Paste-Handler
    table.addEventListener("paste", (e) => {
      e.preventDefault();
      const text = e.clipboardData.getData("text/plain");
      if (!text) return;

      const pasteRows = text.split(/\r?\n/).filter((r) => r.trim());
      if (pasteRows.length === 0) return;

      const activeInput = document.activeElement;
      let startRow = 0;
      let startCol = 0;

      if (activeInput && activeInput.tagName === "INPUT") {
        const td = activeInput.closest("td");
        const tr = td?.closest("tr");
        if (tr) {
          const allRows = Array.from(tbody.children);
          startRow = allRows.indexOf(tr);
          if (startRow >= 0) {
            const allCells = Array.from(tr.children);
            const cellIdx = allCells.indexOf(td);
            startCol = cellIdx > 0 ? cellIdx - 1 : 0;
          }
        }
      }

      const keys = [
        "firstName",
        "lastName",
        "street",
        "houseNumber",
        "zip",
        "city",
        "country",
      ];
      const currentRows = table._rows;
      const newData = [];
      for (let i = 0; i < want; i++) {
        newData.push(
          currentRows[i]
            ? { ...currentRows[i] }
            : {
                firstName: "",
                lastName: "",
                street: "",
                houseNumber: "",
                zip: "",
                city: "",
                country: isDirectShipping ? "Deutschland" : "",
              },
        );
      }

      let pastedCells = 0;
      pasteRows.forEach((rowText, rowOffset) => {
        const targetRow = startRow + rowOffset;
        if (targetRow >= want) return;

        const cells = rowText.split("\t");
        cells.forEach((cellValue, colOffset) => {
          const targetCol = startCol + colOffset;
          if (targetCol >= keys.length) return;
          const key = keys[targetCol];
          newData[targetRow][key] = cellValue;
          pastedCells++;
        });
      });

      if (pastedCells > 0) {
        dispatch({ type: "SET_RECIPIENT_ROWS", rows: newData });
      }
    });

    return table;
  }

  // Freie Adresstabelle (5 Zeilen)
  function buildFreeTable(currentState) {
    const rows = Array.isArray(currentState.freeAddressRows)
      ? currentState.freeAddressRows
      : [];

    const table = h(
      "table",
      { class: "sk-table sk-table-pasteable", tabindex: "0" },
      [],
    );
    table.appendChild(
      h("thead", {}, [
        h("tr", {}, [
          h("th", { text: "Nr.", class: "sk-table-row-number" }),
          h("th", { text: "Zeile 1" }),
          h("th", { text: "Zeile 2" }),
          h("th", { text: "Zeile 3" }),
          h("th", { text: "Zeile 4" }),
          h("th", { text: "Land" }),
        ]),
      ]),
    );

    const tbody = h("tbody", {}, []);
    for (let idx = 0; idx < want; idx++) {
      const r = rows[idx] || {};
      const cell = (key) =>
        h("td", {}, [
          h("input", {
            class: "sk-input",
            type: "text",
            value: r[key] || "",
            "data-row": idx,
            "data-col": key,
            "data-sk-focus": `freeaddr.${key}.${idx}`,
            oninput: (e) => {
              if (!rows[idx]) {
                rows[idx] = {
                  line1: "",
                  line2: "",
                  line3: "",
                  line4: "",
                  line5: "",
                };
              }
              rows[idx][key] = e.target.value;
            },
          }),
        ]);

      tbody.appendChild(
        h("tr", {}, [
          h("td", { text: String(idx + 1), class: "sk-table-row-number" }),
          cell("line1"),
          cell("line2"),
          cell("line3"),
          cell("line4"),
          cell("line5"),
        ]),
      );
    }
    table.appendChild(tbody);

    // Focusout-Handler mit Debounce um Flackern zu vermeiden
    let focusoutTimer = null;
    let hasLocalChanges = false; // Track ob lokale Änderungen gemacht wurden
    table.addEventListener("focusout", (e) => {
      if (focusoutTimer) clearTimeout(focusoutTimer);
      focusoutTimer = setTimeout(() => {
        const newFocus = document.activeElement;
        if (!table.contains(newFocus) && hasLocalChanges) {
          // Nur dispatchen wenn lokale Änderungen gemacht wurden
          dispatch({ type: "SET_FREE_ADDRESS_ROWS", rows: [...rows] });
          hasLocalChanges = false;
        }
      }, 150);
    });

    // Änderungen tracken bei Input
    table.addEventListener("input", () => {
      hasLocalChanges = true;
    });

    // Paste-Handler
    table.addEventListener("paste", (e) => {
      e.preventDefault();
      const text = e.clipboardData.getData("text/plain");
      if (!text) return;

      const pasteRows = text.split(/\r?\n/).filter((r) => r.trim());
      if (pasteRows.length === 0) return;

      const activeInput = document.activeElement;
      let startRow = 0;
      let startCol = 0;

      if (activeInput && activeInput.tagName === "INPUT") {
        const td = activeInput.closest("td");
        const tr = td?.closest("tr");
        if (tr) {
          const allRows = Array.from(tbody.children);
          startRow = allRows.indexOf(tr);
          if (startRow >= 0) {
            const allCells = Array.from(tr.children);
            const cellIdx = allCells.indexOf(td);
            startCol = cellIdx > 0 ? cellIdx - 1 : 0;
          }
        }
      }

      const keys = ["line1", "line2", "line3", "line4", "line5"];
      const newData = [];
      for (let i = 0; i < want; i++) {
        newData.push(
          rows[i]
            ? { ...rows[i] }
            : { line1: "", line2: "", line3: "", line4: "", line5: "" },
        );
      }

      let pastedCells = 0;
      pasteRows.forEach((rowText, rowOffset) => {
        const targetRow = startRow + rowOffset;
        if (targetRow >= want) return;

        const cells = rowText.split("\t");
        cells.forEach((cellValue, colOffset) => {
          const targetCol = startCol + colOffset;
          if (targetCol >= keys.length) return;
          newData[targetRow][keys[targetCol]] = cellValue;
          pastedCells++;
        });
      });

      if (pastedCells > 0) {
        dispatch({ type: "SET_FREE_ADDRESS_ROWS", rows: newData });
      }
    });

    return table;
  }

  // Modal öffnen
  function openRecipientsModal() {
    if (addressMode === "free") {
      createTableModal(dispatch, {
        title: "Freie Adresse",
        columns: [
          { key: "line1", label: "Zeile 1" },
          { key: "line2", label: "Zeile 2" },
          { key: "line3", label: "Zeile 3" },
          { key: "line4", label: "Zeile 4" },
          { key: "line5", label: "Land" },
        ],
        getData: (state) => {
          const rows = Array.isArray(state.freeAddressRows)
            ? state.freeAddressRows
            : [];
          const normalized = [];
          for (let i = 0; i < want; i++) {
            normalized.push(
              rows[i] || {
                line1: "",
                line2: "",
                line3: "",
                line4: "",
                line5: "",
              },
            );
          }
          return normalized;
        },
        setData: (dispatch, data) => {
          dispatch({ type: "SET_FREE_ADDRESS_ROWS", rows: data });
        },
        rowCount: () => want,
        exportFilename: "freie_adressen.csv",
        helpText: "Geben Sie bis zu 5 Zeilen pro Empfänger ein.",
        getStateFunc: () => currentGlobalState,
      });
    } else {
      createTableModal(dispatch, {
        title: "Empfänger-Daten",
        columns: [
          { key: "firstName", label: "Vorname" },
          { key: "lastName", label: "Nachname" },
          { key: "street", label: "Straße" },
          { key: "houseNumber", label: "Nr." },
          { key: "zip", label: "PLZ" },
          { key: "city", label: "Stadt" },
          {
            key: "country",
            label: "Land",
            placeholder: isDirectShipping ? "Deutschland" : "",
          },
        ],
        getData: (state) => {
          const rows = Array.isArray(state.recipientRows)
            ? state.recipientRows
            : [];
          const normalized = [];
          for (let i = 0; i < want; i++) {
            normalized.push(
              rows[i] || {
                firstName: "",
                lastName: "",
                street: "",
                houseNumber: "",
                zip: "",
                city: "",
                country: isDirectShipping ? "Deutschland" : "",
              },
            );
          }
          return normalized;
        },
        setData: (dispatch, data) => {
          dispatch({ type: "SET_RECIPIENT_ROWS", rows: data });
        },
        rowCount: () => want,
        exportFilename: "empfaenger.csv",
        helpText:
          "Importieren Sie eine CSV-Datei, fügen Sie Daten aus Excel ein (Strg+V) oder füllen Sie die Tabelle manuell aus.",
        getStateFunc: () => currentGlobalState,
      });
    }
  }

  // Switch-Element für Adressmodus
  const addressModeSwitch = h(
    "div",
    {
      class: "sk-address-mode-switch",
      style: "display: flex; gap: 8px; margin-bottom: 12px;",
    },
    [
      h("button", {
        type: "button",
        class:
          addressMode === "classic"
            ? "sk-btn sk-btn-primary"
            : "sk-btn sk-btn-outline",
        text: "Klassische Adresse",
        onclick: () => dispatch({ type: "SET_ADDRESS_MODE", mode: "classic" }),
      }),
      h("button", {
        type: "button",
        class:
          addressMode === "free"
            ? "sk-btn sk-btn-primary"
            : "sk-btn sk-btn-outline",
        text: "Freie Adresse (bis zu 5 Zeilen)",
        onclick: () => dispatch({ type: "SET_ADDRESS_MODE", mode: "free" }),
      }),
    ],
  );

  const tableContent =
    addressMode === "free" ? buildFreeTable(state) : buildClassicTable(state);

  // Porto-Hinweis entfernt
  const shippingNotice = null;

  const cardContent = [
    addressModeSwitch,
    h("div", {
      class: "sk-help",
      text: "Importieren Sie eine CSV-Datei, fügen Sie Daten aus Excel ein (Strg+V) oder füllen Sie die Tabelle manuell aus.",
    }),
    h("button", {
      type: "button",
      class: "sk-btn",
      text: "Tabelle maximieren",
      onclick: openRecipientsModal,
    }),
    h("div", { class: "sk-table-wrapper" }, [tableContent]),
  ];

  if (shippingNotice) {
    cardContent.push(shippingNotice);
  }

  return renderCard(
    "Empfänger-Daten",
    addressMode === "free"
      ? "Geben Sie bis zu 5 Zeilen pro Empfänger ein"
      : "Pflicht: Alle Felder müssen ausgefüllt werden",
    cardContent,
  );
}

// Helper: Kombinierte Platzhalter Tabelle (read-only + editierbar)
function renderCombinedPlaceholderTable(
  state,
  dispatch,
  readOnlyPlaceholders,
  editablePlaceholders,
  title,
) {
  const qty = Number(state.answers.quantity || 0);
  const want = qty > 0 ? qty : 0;

  const cleanReadOnly = readOnlyPlaceholders
    .map((p) => normalizePlaceholderName(p))
    .filter((p) => !!p);

  const cleanEditable = editablePlaceholders
    .map((p) => normalizePlaceholderName(p))
    .filter((p) => !!p);

  const allPlaceholders = [...cleanReadOnly, ...cleanEditable];
  if (allPlaceholders.length === 0) return null;

  // Vorschau-Tabelle bauen
  function buildPreviewTable(currentState) {
    const table = h(
      "table",
      {
        class: "sk-table sk-table-pasteable",
        tabindex: "0",
      },
      [],
    );

    // Lokaler Cache für Platzhalter-Werte (kein Re-Render bei Eingabe)
    const localValues = {};
    for (const name of cleanEditable) {
      localValues[name] = [...(currentState.placeholderValues?.[name] || [])];
      while (localValues[name].length < want) {
        localValues[name].push("");
      }
    }

    let hasLocalChanges = false;
    let autoSaveInterval = null;

    // Funktion zum Speichern der lokalen Änderungen
    const saveLocalChanges = () => {
      if (hasLocalChanges) {
        dispatch({ type: "SET_PLACEHOLDER_VALUES", values: localValues });
        hasLocalChanges = false;
      }
    };

    // Bei globaler Registry registrieren (für flush vor Navigation)
    const unregisterSave = registerTableSave(saveLocalChanges);

    // Auto-Save alle 60 Sekunden
    autoSaveInterval = setInterval(saveLocalChanges, 60000);

    // Cleanup-Funktion für Interval und Registry
    table._cleanup = () => {
      if (autoSaveInterval) clearInterval(autoSaveInterval);
      unregisterSave();
    };

    // Header
    table.appendChild(
      h("thead", {}, [
        h("tr", {}, [
          h("th", { text: "Nr.", class: "sk-table-row-number" }),
          ...allPlaceholders.map((p) => {
            const isReadOnly = cleanReadOnly.includes(p);
            return h("th", {
              text: `[[${p}]]`,
              class: isReadOnly ? "sk-table-readonly-header" : "",
            });
          }),
        ]),
      ]),
    );

    // Body
    const tbody = h("tbody", {}, []);
    for (let row = 0; row < want; row++) {
      const tr = h("tr", {}, [
        h("td", { text: String(row + 1), class: "sk-table-row-number" }),
      ]);

      for (const name of allPlaceholders) {
        const isReadOnly = cleanReadOnly.includes(name);

        let val = "";
        // Bei Empfängerdaten: vorname, name, ort aus recipientRows holen
        if (
          currentState.answers.envelopeMode === "recipientData" &&
          (name === "vorname" || name === "name" || name === "ort")
        ) {
          const recipients = currentState.recipientRows || [];
          const recipient = recipients[row] || {};
          if (name === "vorname") val = recipient.firstName || "";
          else if (name === "name") val = recipient.lastName || "";
          else if (name === "ort") val = recipient.city || "";
        } else if (isReadOnly) {
          val = (currentState.placeholderValues?.[name] || [])[row] || "";
        } else {
          val = localValues[name][row] || "";
        }

        tr.appendChild(
          h("td", { class: isReadOnly ? "sk-table-readonly-cell" : "" }, [
            h("input", {
              class: "sk-input",
              type: "text",
              value: val,
              readonly: isReadOnly,
              "data-row": row,
              "data-col": name,
              "data-sk-focus": `placeholder.${name}.${row}`,
              oninput: (e) => {
                if (!isReadOnly) {
                  // Nur lokal speichern - kein Re-Render!
                  localValues[name][row] = e.target.value;
                  hasLocalChanges = true;
                }
              },
            }),
          ]),
        );
      }
      tbody.appendChild(tr);
    }
    table.appendChild(tbody);

    // Focusout-Handler: Speichern wenn Fokus die Tabelle verlässt
    let focusoutTimer = null;
    table.addEventListener("focusout", (e) => {
      if (focusoutTimer) clearTimeout(focusoutTimer);
      focusoutTimer = setTimeout(() => {
        const newFocus = document.activeElement;
        if (!table.contains(newFocus)) {
          saveLocalChanges();
        }
      }, 150);
    });

    // Paste-Handler für Excel-Daten
    table.addEventListener("paste", (e) => {
      e.preventDefault();
      const text = e.clipboardData.getData("text/plain");
      if (!text) return;

      const pasteRows = text.split(/\r?\n/).filter((r) => r.trim());
      if (pasteRows.length === 0) return;

      // Startposition finden
      const activeInput = document.activeElement;
      let startRow = 0;
      let startCol = 0;

      if (activeInput && activeInput.tagName === "INPUT") {
        const td = activeInput.closest("td");
        const tr = td?.closest("tr");
        if (tr) {
          const allRows = Array.from(tbody.children);
          startRow = allRows.indexOf(tr);
          if (startRow >= 0) {
            const allCells = Array.from(tr.children);
            const cellIdx = allCells.indexOf(td);
            // cellIdx 0 ist die Nummer-Spalte, daher -1 für die Daten-Spalten
            startCol = cellIdx > 0 ? cellIdx - 1 : 0;
          }
        }
      }

      // Alle Änderungen in localValues sammeln und Inputs aktualisieren
      let pastedCells = 0;
      pasteRows.forEach((rowText, rowOffset) => {
        const targetRow = startRow + rowOffset;
        if (targetRow >= want) return;

        const cells = rowText.split("\t");
        cells.forEach((cellValue, colOffset) => {
          const targetCol = startCol + colOffset;
          if (targetCol >= allPlaceholders.length) return;

          const name = allPlaceholders[targetCol];
          const isReadOnly = cleanReadOnly.includes(name);

          // Nur editierbare Spalten aktualisieren
          if (!isReadOnly) {
            localValues[name][targetRow] = cellValue;
            // Input-Element direkt aktualisieren
            const input = table.querySelector(
              `input[data-row="${targetRow}"][data-col="${name}"]`,
            );
            if (input) input.value = cellValue;
            pastedCells++;
          }
        });
      });

      // Nach Paste: Einmal speichern
      if (pastedCells > 0) {
        hasLocalChanges = true;
        saveLocalChanges();
      }
    });

    return table;
  }

  // Modal mit generischer Funktion öffnen
  function openCombinedModal() {
    createTableModal(dispatch, {
      title: title,
      columns: allPlaceholders.map((name) => ({
        key: name,
        label: `[[${name}]]`,
        readOnly: cleanReadOnly.includes(name),
      })),
      getData: (state) => {
        const qty = Number(state.answers.quantity || 0);
        const want = qty > 0 ? qty : 0;
        const result = [];
        for (let row = 0; row < want; row++) {
          const rowData = {};
          for (const name of allPlaceholders) {
            // Bei Empfängerdaten: vorname, name, ort aus recipientRows holen
            if (
              state.answers.envelopeMode === "recipientData" &&
              (name === "vorname" || name === "name" || name === "ort")
            ) {
              const recipients = state.recipientRows || [];
              const recipient = recipients[row] || {};
              if (name === "vorname") rowData[name] = recipient.firstName || "";
              else if (name === "name")
                rowData[name] = recipient.lastName || "";
              else if (name === "ort") rowData[name] = recipient.city || "";
            } else {
              rowData[name] =
                (state.placeholderValues?.[name] || [])[row] || "";
            }
          }
          result.push(rowData);
        }
        return result;
      },
      setData: (dispatch, data) => {
        // Nur editierbare Felder updaten
        data.forEach((rowData, rowIdx) => {
          cleanEditable.forEach((name) => {
            dispatch({
              type: "SET_PLACEHOLDER_VALUE",
              name,
              row: rowIdx,
              value: rowData[name] || "",
            });
          });
        });
      },
      rowCount: (state) => {
        const qty = Number(state.answers.quantity || 0);
        return qty > 0 ? qty : 0;
      },
      exportFilename: "platzhalter.csv",
      infoText:
        "Bitte erstellen Sie neue Platzhalter über die Weboberfläche. Anschließend können Sie auch diese importieren.",
      helpText:
        "Nutzen Sie [[platzhalter]] zur Individualisierung im Text. Vorhandene Platzhalter (grau hinterlegt) kommen aus dem Schritt Umschlag, neue können Sie selbst definieren.",
      getStateFunc: () => currentGlobalState,
    });
  }

  return renderCard(title, null, [
    h("button", {
      type: "button",
      class: "sk-btn",
      text: "Tabelle maximieren",
      onclick: openCombinedModal,
    }),
    h("div", { class: "sk-table-wrapper" }, [buildPreviewTable(state)]),
    (() => {
      const helpUrl =
        window.SkriftConfigurator?.settings?.font_sample
          ?.placeholder_help_url || "";
      const elements = [
        "Nutzen Sie ",
        h("strong", { text: "[[platzhalter]]" }),
        " zur Individualisierung im Text. Vorhandene Platzhalter (grau hinterlegt) kommen aus dem Schritt Umschlag, neue können Sie selbst definieren.",
      ];
      if (helpUrl) {
        elements.push(" ");
        elements.push(
          h("a", {
            href: helpUrl,
            target: "_blank",
            rel: "noopener noreferrer",
            style: "color: #0073aa; text-decoration: underline;",
            text: "Mehr erfahren →",
          }),
        );
      }
      return h(
        "div",
        { class: "sk-help", style: "margin-top: 12px;" },
        elements,
      );
    })(),
  ]);
}

// Helper: Platzhalter Tabelle (mit Maximieren-Button und Modal)
function renderPlaceholderTable(
  state,
  dispatch,
  placeholderNames,
  title,
  readOnly = false,
  helpText = null,
) {
  const qty = Number(state.answers.quantity || 0);
  const want = qty > 0 ? qty : 0;

  const clean = placeholderNames
    .map((p) => normalizePlaceholderName(p))
    .filter((p) => !!p);
  if (clean.length === 0) return null;

  // Vorschau-Tabelle bauen
  function buildPreviewTable(currentState) {
    const table = h(
      "table",
      {
        class: "sk-table sk-table-pasteable",
        tabindex: "0",
      },
      [],
    );

    table.appendChild(
      h("thead", {}, [
        h("tr", {}, [
          h("th", { text: "Nr.", class: "sk-table-row-number" }),
          ...clean.map((p) => h("th", { text: `[[${p}]]` })),
        ]),
      ]),
    );

    // Lokaler Cache für Platzhalter-Werte (wird bei focusout synchronisiert)
    const localValues = {};
    for (const name of clean) {
      localValues[name] = [...(currentState.placeholderValues?.[name] || [])];
      // Array auf richtige Länge bringen
      while (localValues[name].length < want) {
        localValues[name].push("");
      }
    }

    const tbody = h("tbody", {}, []);
    for (let row = 0; row < want; row++) {
      const tr = h("tr", {}, [
        h("td", { text: String(row + 1), class: "sk-table-row-number" }),
      ]);
      for (const name of clean) {
        const val = localValues[name][row] || "";
        tr.appendChild(
          h("td", {}, [
            h("input", {
              class: "sk-input",
              type: "text",
              value: val,
              "data-row": row,
              "data-col": name,
              "data-sk-focus": `placeholder.${name}.${row}`,
              oninput: (e) => {
                // Wert nur lokal speichern (kein Re-Render)
                localValues[name][row] = e.target.value;
              },
            }),
          ]),
        );
      }
      tbody.appendChild(tr);
    }
    table.appendChild(tbody);

    // Focusout-Handler mit Debounce - analog zur Empfängertabelle
    let focusoutTimer = null;
    let hasLocalChanges = false; // Track ob lokale Änderungen gemacht wurden
    table.addEventListener("focusout", (e) => {
      if (focusoutTimer) clearTimeout(focusoutTimer);
      focusoutTimer = setTimeout(() => {
        const newFocus = document.activeElement;
        if (!table.contains(newFocus) && hasLocalChanges) {
          // Nur dispatchen wenn lokale Änderungen gemacht wurden
          dispatch({ type: "SET_PLACEHOLDER_VALUES", values: localValues });
          hasLocalChanges = false;
        }
      }, 150);
    });

    // Änderungen tracken bei Input
    table.addEventListener("input", () => {
      hasLocalChanges = true;
    });

    // Paste-Handler für Excel-Daten - analog zur Empfängertabelle
    table.addEventListener("paste", (e) => {
      e.preventDefault();
      const text = e.clipboardData.getData("text/plain");
      if (!text) return;

      const pasteRows = text.split(/\r?\n/).filter((r) => r.trim());
      if (pasteRows.length === 0) return;

      // Startposition finden
      const activeInput = document.activeElement;
      let startRow = 0;
      let startCol = 0;

      if (activeInput && activeInput.tagName === "INPUT") {
        const td = activeInput.closest("td");
        const tr = td?.closest("tr");
        if (tr) {
          const allRows = Array.from(tbody.children);
          startRow = allRows.indexOf(tr);
          if (startRow >= 0) {
            const allCells = Array.from(tr.children);
            const cellIdx = allCells.indexOf(td);
            startCol = cellIdx > 0 ? cellIdx - 1 : 0;
          }
        }
      }

      // Alle Änderungen in localValues sammeln
      let pastedCells = 0;
      pasteRows.forEach((rowText, rowOffset) => {
        const targetRow = startRow + rowOffset;
        if (targetRow >= want) return;

        const cells = rowText.split("\t");
        cells.forEach((cellValue, colOffset) => {
          const targetCol = startCol + colOffset;
          if (targetCol >= clean.length) return;

          const name = clean[targetCol];
          localValues[name][targetRow] = cellValue;
          pastedCells++;
        });
      });

      // Einmal dispatch für alle Änderungen
      if (pastedCells > 0) {
        dispatch({ type: "SET_PLACEHOLDER_VALUES", values: localValues });
      }
    });

    return table;
  }

  // Modal mit generischer Funktion öffnen
  function openPlaceholderModal() {
    createTableModal(dispatch, {
      title: title,
      columns: clean.map((name) => ({
        key: name,
        label: `[[${name}]]`,
      })),
      getData: (state) => {
        const qty = Number(state.answers.quantity || 0);
        const want = qty > 0 ? qty : 0;
        const result = [];
        for (let row = 0; row < want; row++) {
          const rowData = {};
          clean.forEach((name) => {
            rowData[name] = (state.placeholderValues?.[name] || [])[row] || "";
          });
          result.push(rowData);
        }
        return result;
      },
      setData: (dispatch, data) => {
        // Daten in einzelne SET_PLACEHOLDER_VALUE Aktionen umwandeln
        data.forEach((rowData, rowIdx) => {
          clean.forEach((name) => {
            dispatch({
              type: "SET_PLACEHOLDER_VALUE",
              name,
              row: rowIdx,
              value: rowData[name] || "",
            });
          });
        });
      },
      rowCount: (state) => {
        const qty = Number(state.answers.quantity || 0);
        return qty > 0 ? qty : 0;
      },
      exportFilename: "platzhalter.csv",
      infoText:
        "Bitte erstellen Sie neue Platzhalter über die Weboberfläche. Anschließend können Sie auch diese importieren.",
      helpText:
        "Importieren Sie eine CSV-Datei, fügen Sie Daten aus Excel ein (Strg+V) oder füllen Sie die Tabelle manuell aus.",
      getStateFunc: () => currentGlobalState,
    });
  }

  const defaultHelpText =
    "Importieren Sie eine CSV-Datei, fügen Sie Daten aus Excel ein (Strg+V) oder füllen Sie die Tabelle manuell aus.";

  return renderCard(title, null, [
    h("button", {
      type: "button",
      class: "sk-btn",
      text: "Tabelle maximieren",
      onclick: openPlaceholderModal,
    }),
    h("div", { class: "sk-table-wrapper" }, [buildPreviewTable(state)]),
    h("div", { class: "sk-help", style: "margin-top: 12px;" }, [
      helpText || defaultHelpText,
    ]),
  ]);
}

// Preview Renderer
function renderPreview(dom, state, dispatch) {
  // Prüfe ob wir eine existierende Vorschau-Box haben
  const existingPreviewCard = dom.preview.querySelector(".sk-preview-card");
  const existingPreviewBox =
    existingPreviewCard?.querySelector(".sk-preview-box");
  const hasActivePreview =
    existingPreviewBox &&
    !existingPreviewBox.querySelector(".sk-preview-placeholder");

  // Prüfe ob Step gespeichert ist und ob er sich geändert hat
  const lastStep = dom.preview.dataset.lastStep;
  const currentStep = state.step;
  const stepChanged = lastStep && lastStep !== String(currentStep);

  // Bei Step-Wechsel: Immer clearen und Preview-Manager clearen
  if (stepChanged) {
    clear(dom.preview);
    // Preview Manager resetten
    if (window.envelopePreviewManager) {
      window.envelopePreviewManager.currentBatchPreviews = [];
      window.envelopePreviewManager.currentBatchIndex = 0;
      window.envelopePreviewManager.previewCount = 0;
    }
    if (window.contentPreviewManager) {
      window.contentPreviewManager.currentBatchPreviews = [];
      window.contentPreviewManager.currentBatchIndex = 0;
      window.contentPreviewManager.previewCount = 0;
    }
  }
  // Sonst: Nur clearen wenn keine Preview geladen ist
  else {
    const hasEnvelopePreview =
      window.envelopePreviewManager?.currentBatchPreviews?.length > 0;
    const hasContentPreview =
      window.contentPreviewManager?.currentBatchPreviews?.length > 0;

    if (!hasEnvelopePreview && !hasContentPreview) {
      clear(dom.preview);
    }
  }

  // Step speichern für nächstes Mal
  dom.preview.dataset.lastStep = String(currentStep);

  // Show contact card on product, quantity, customer data and review step
  // (statt Vorschau bei Produkt und Allgemein)
  if (
    state.step === STEPS.PRODUCT ||
    state.step === STEPS.QUANTITY ||
    state.step === STEPS.CUSTOMER_DATA ||
    state.step === STEPS.REVIEW
  ) {
    clear(dom.preview); // Hier immer clearen, da Contact Card
    const contactCard = renderCard("Noch Fragen?", null, [
      h("p", {
        style:
          "margin: 0 0 20px; font-size: 14px; color: #666; line-height: 1.6;",
        text: "Sie haben Fragen zu Ihrer Bestellung oder möchten eine individuelle Beratung? Wir sind gerne für Sie da und helfen Ihnen weiter!",
      }),
      h(
        "div",
        {
          style:
            "display: flex; align-items: center; gap: 12px; margin-bottom: 12px;",
        },
        [
          h("svg", {
            xmlns: "http://www.w3.org/2000/svg",
            width: "20",
            height: "20",
            viewBox: "0 0 24 24",
            fill: "none",
            stroke: "currentColor",
            "stroke-width": "2",
            "stroke-linecap": "round",
            "stroke-linejoin": "round",
            style: "flex-shrink: 0; color: #0073aa;",
            innerHTML:
              '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>',
          }),
          h("a", {
            href: "tel:+4968722153",
            style:
              "font-size: 15px; color: #333; text-decoration: none; font-weight: 500;",
            text: "+49 (0)6872 2153",
          }),
        ],
      ),
      h("div", { style: "display: flex; align-items: center; gap: 12px;" }, [
        h("svg", {
          xmlns: "http://www.w3.org/2000/svg",
          width: "20",
          height: "20",
          viewBox: "0 0 24 24",
          fill: "none",
          stroke: "currentColor",
          "stroke-width": "2",
          "stroke-linecap": "round",
          "stroke-linejoin": "round",
          style: "flex-shrink: 0; color: #0073aa;",
          innerHTML:
            '<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline>',
        }),
        h("a", {
          href: "mailto:hello@skrift.de",
          style:
            "font-size: 15px; color: #333; text-decoration: none; font-weight: 500;",
          text: "hello@skrift.de",
        }),
      ]),
    ]);

    dom.preview.appendChild(contactCard);
    // Auch für Contact Card mobile synchronisieren
    syncMobilePreview(dom);
    return;
  }

  const envType = calcEffectiveEnvelopeType(state);
  const previewTitle = state?.ctx?.product?.label
    ? `Vorschau: ${state.ctx.product.label}`
    : "Vorschau";

  // Format-Informationen ermitteln
  const fmt = state.answers.format;
  const productFormat =
    fmt === "a6p"
      ? "A6 Hochformat"
      : fmt === "a6l"
        ? "A6 Querformat"
        : fmt === "a4"
          ? "A4"
          : fmt?.toUpperCase() || "A4";
  const envelopeFormat =
    envType === "dinlang" ? "DIN lang" : envType === "c6" ? "C6" : "";

  // Formatinformationen für Umschlag-Step
  let formatInfo = "";
  if (state.step === STEPS.ENVELOPE && envelopeFormat) {
    formatInfo = `Umschlagformat: ${envelopeFormat}`;
  }
  // Formatinformationen für Content-Step
  else if (state.step === STEPS.CONTENT) {
    formatInfo = `Schriftstückformat: ${productFormat}`;
  }

  const content = [
    // Header mit Titel und Navigation
    h(
      "div",
      {
        class: "sk-preview-header",
        style:
          "display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;",
      },
      [
        h(
          "div",
          { style: "flex: 1;" },
          [
            h("div", { class: "sk-preview-title", text: previewTitle }),
            formatInfo
              ? h("div", {
                  class: "sk-preview-sub",
                  text: formatInfo,
                })
              : null,
          ].filter(Boolean),
        ),
        h("div", { class: "sk-preview-navigation-container" }),
      ],
    ),
    h("div", { class: "sk-preview-box" }, [
      h("div", {
        class: "sk-preview-placeholder",
        text: "Hier können Sie sich die Vorschau Ihres Produktes anzeigen lassen.",
      }),
    ]),
    // Status Anzeige direkt unter dem Dokument
    h("div", {
      class: "sk-preview-status",
      style:
        "margin-top: 10px; font-size: 14px; color: #666; text-align: center;",
    }),
  ].filter(Boolean);

  // Vorschau-Button für Umschlag (nur im Envelope-Step)
  if (state.step === STEPS.ENVELOPE) {
    const canGenerateEnvelopePreview =
      state.answers.shippingMode === "direct" ||
      (state.answers.shippingMode === "bulk" &&
        state.answers.envelope === true &&
        (state.answers.envelopeMode === "recipientData" ||
          state.answers.envelopeMode === "customText"));

    if (canGenerateEnvelopePreview) {
      const manager = window.envelopePreviewManager;
      const requestsRemaining = manager?.requestsRemaining || 10;
      const maxRequests = manager?.maxRequests || 10;

      // Request Counter
      content.push(
        h("div", {
          class: "sk-preview-request-counter",
          style:
            "margin-top: 10px; padding: 8px; background: #e3f2fd; border: 1px solid #2196f3; border-radius: 4px; color: #1565c0; font-size: 14px; text-align: center; font-weight: 500;",
          text: `Verbleibende Vorschau-Anfragen: ${requestsRemaining}/${maxRequests}`,
        }),
      );

      // Button
      content.push(
        h("button", {
          type: "button",
          class: "sk-btn sk-btn-secondary sk-preview-generate-btn",
          style: "width: 100%; margin-top: 10px;",
          text: "Umschlag Vorschau generieren",
          onclick: async () => {
            if (window.envelopePreviewManager) {
              // WICHTIG: Aktuellen State verwenden, nicht den gecachten aus dem Closure
              const currentState = window.currentGlobalState || state;
              await window.envelopePreviewManager.generatePreviews(
                currentState,
                dom.preview,
                true,
              );
            }
          },
        }),
      );
    }
  }

  // Vorschau-Button für Schriftstück (nur im Content-Step)
  if (state.step === STEPS.CONTENT) {
    const canGenerateContentPreview =
      state.answers.contentCreateMode === "self";

    if (canGenerateContentPreview) {
      const manager = window.contentPreviewManager;
      const requestsRemaining = manager?.requestsRemaining || 10;
      const maxRequests = manager?.maxRequests || 10;

      // Request Counter
      content.push(
        h("div", {
          class: "sk-preview-request-counter",
          style:
            "margin-top: 10px; padding: 8px; background: #e3f2fd; border: 1px solid #2196f3; border-radius: 4px; color: #1565c0; font-size: 14px; text-align: center; font-weight: 500;",
          text: `Verbleibende Vorschau-Anfragen: ${requestsRemaining}/${maxRequests}`,
        }),
      );

      // Button
      content.push(
        h("button", {
          type: "button",
          class: "sk-btn sk-btn-secondary sk-preview-generate-btn",
          style: "width: 100%; margin-top: 10px;",
          text: "Vorschau generieren",
          onclick: async () => {
            if (window.contentPreviewManager) {
              // WICHTIG: Aktuellen State verwenden, nicht den gecachten aus dem Closure
              const currentState = window.currentGlobalState || state;
              const result =
                await window.contentPreviewManager.generatePreviews(
                  currentState,
                  dom.preview,
                  false,
                );

              // Overflow-Warnung anzeigen wenn nötig
              const formContainer = document.getElementById("sk-form");
              if (result && result.hasOverflow && formContainer) {
                showOverflowWarning(result.overflowFiles, formContainer);
              } else if (formContainer) {
                hideOverflowWarning(formContainer);
              }
            }
          },
        }),
      );
    }
  }

  // Nur hinzufügen wenn keine Preview-Card existiert
  const existingCard = dom.preview.querySelector(".sk-preview-card");
  if (!existingCard) {
    dom.preview.appendChild(h("div", { class: "sk-preview-card" }, content));
  } else {
    // Preview-Card existiert bereits - nur Button und Counter aktualisieren
    const existingCounter = existingCard.querySelector(
      ".sk-preview-request-counter",
    );
    const newCounter = content.find(
      (el) => el && el.class === "sk-preview-request-counter",
    );
    if (existingCounter && newCounter) {
      existingCounter.textContent = newCounter.text;
    }
  }

  // Mobile Preview synchronisieren
  syncMobilePreview(dom);
}

/**
 * Synchronisiert den Mobile Preview Container mit dem Desktop Preview
 * Klont den Inhalt und passt Event-Handler für die Buttons an
 *
 * Mobile Layout:
 * - previewMobile: Nur echte Vorschau-Inhalte (vor dem Weiter-Button)
 * - contactMobile: Nur Contact Card "Noch Fragen?" (nach dem Weiter-Button)
 */
function syncMobilePreview(dom) {
  // Prüfe ob Contact Card im Desktop-Preview ist
  const hasContactCard =
    dom.preview.querySelector(".sk-card-head h3")?.textContent ===
    "Noch Fragen?";

  // Contact Card Mobile synchronisieren
  if (dom.contactMobile) {
    clear(dom.contactMobile);
    if (hasContactCard) {
      // Contact Card in den Mobile-Contact-Container klonen
      dom.contactMobile.innerHTML = dom.preview.innerHTML;
    }
  }

  // Preview Mobile synchronisieren - nur wenn KEINE Contact Card
  if (dom.previewMobile) {
    clear(dom.previewMobile);

    // Nur echte Vorschau-Inhalte klonen (nicht Contact Card)
    if (!hasContactCard) {
      const desktopContent = dom.preview.innerHTML;
      if (desktopContent) {
        dom.previewMobile.innerHTML = desktopContent;

        // Event-Handler für Buttons im Mobile-Container neu binden
        bindMobilePreviewHandlers(dom);
      }
    }
  }
}

/**
 * Bindet Event-Handler für den Mobile Preview Container
 */
function bindMobilePreviewHandlers(dom) {
  if (!dom.previewMobile) return;

  const mobileGenerateBtn = dom.previewMobile.querySelector(
    ".sk-preview-generate-btn",
  );
  if (mobileGenerateBtn) {
    mobileGenerateBtn.onclick = async () => {
      const currentState = window.currentGlobalState;
      if (!currentState) return;

      // Bestimme welcher Manager verwendet werden soll basierend auf dem aktuellen Step
      const isEnvelope = currentState.step === 2; // STEPS.ENVELOPE
      const manager = isEnvelope
        ? window.envelopePreviewManager
        : window.contentPreviewManager;

      if (manager) {
        // Preview in BEIDEN Containern aktualisieren
        const result = await manager.generatePreviews(
          currentState,
          dom.preview,
          isEnvelope,
        );
        // Nach Generierung nochmal synchronisieren
        syncMobilePreview(dom);

        // Overflow-Warnung bei Briefen (nicht Umschläge)
        if (!isEnvelope) {
          const formContainer = document.getElementById("sk-form");
          if (result && result.hasOverflow && formContainer) {
            showOverflowWarning(result.overflowFiles, formContainer);
          } else if (formContainer) {
            hideOverflowWarning(formContainer);
          }
        }
      }
    };
  }

  // Navigation Buttons im Mobile-Container
  const mobilePrevBtn = dom.previewMobile.querySelector(".sk-preview-nav-prev");
  const mobileNextBtn = dom.previewMobile.querySelector(".sk-preview-nav-next");

  if (mobilePrevBtn) {
    mobilePrevBtn.onclick = () => {
      // Finde und klicke den Desktop-Button
      const desktopBtn = dom.preview.querySelector(".sk-preview-nav-prev");
      if (desktopBtn) desktopBtn.click();
      // Nach Navigation synchronisieren
      setTimeout(() => syncMobilePreview(dom), 50);
    };
  }

  if (mobileNextBtn) {
    mobileNextBtn.onclick = () => {
      // Finde und klicke den Desktop-Button
      const desktopBtn = dom.preview.querySelector(".sk-preview-nav-next");
      if (desktopBtn) desktopBtn.click();
      // Nach Navigation synchronisieren
      setTimeout(() => syncMobilePreview(dom), 50);
    };
  }

  // Klick auf Preview-Box für Modal
  const mobilePreviewBox = dom.previewMobile.querySelector(".sk-preview-box");
  if (mobilePreviewBox) {
    mobilePreviewBox.onclick = () => {
      // Desktop-Preview-Box klicken, um Modal zu öffnen
      const desktopBox = dom.preview.querySelector(".sk-preview-box");
      if (desktopBox) desktopBox.click();
    };
  }
}

// Main Render Function
export function render({ state, dom, dispatch }) {
  // Globalen State aktualisieren für Modals und PreviewManager
  currentGlobalState = state;
  window.currentGlobalState = state;

  // noPrice-Modus: CSS-Klasse auf Root-Element setzen
  const root = dom.form?.closest(".sk-configurator");
  if (root) {
    if (state.noPrice) {
      root.classList.add("sk-no-price");
    } else {
      root.classList.remove("sk-no-price");
    }
  }

  // Periodische Speicherung starten (nur einmal)
  startPersistInterval();

  // Hydration VOR dem Rendern prüfen - wenn hydriert wird,
  // wird ein neuer Render mit dem hydrierten State ausgelöst,
  // daher diesen Render-Durchlauf abbrechen
  const didHydrate = hydrateIfPossible(state, dispatch);
  if (didHydrate) return;

  if (dom.stepper) renderStepper(dom.stepper, state, dispatch);
  renderTopbar(dom, state);

  const focusSnapshot = captureFocus(dom);

  clear(dom.form);

  let view = null;
  switch (state.step) {
    case STEPS.PRODUCT:
      view = renderProductStep(state, dispatch);
      break;
    case STEPS.QUANTITY:
      view = renderQuantityStep(state, dispatch);
      break;
    case STEPS.ENVELOPE:
      view = renderEnvelopeStep(state, dispatch);
      break;
    case STEPS.CONTENT:
      view = renderContentStep(state, dispatch);
      break;
    case STEPS.CUSTOMER_DATA:
      view = renderCustomerDataStep(state, dispatch);
      break;
    case STEPS.REVIEW:
      view = renderReviewStep(state, dispatch);
      break;
  }

  if (view) dom.form.appendChild(view);

  renderPreview(dom, state, dispatch);

  restoreFocus(dom, focusSnapshot);

  dom.prev.disabled = state.history.length === 0;
  dom.next.disabled = !validateStep(state) || state.step === STEPS.REVIEW;
  dom.next.textContent =
    state.step === STEPS.CUSTOMER_DATA ? "Weiter zur Prüfung" : "Weiter";

  writePersisted(state);
}