const { ProductCard, ReserveDialog, IconButton, Badge, PhotoFrame } = window.WeiterfunkelnChDesignSystem_572ff0;

/* Produktkachel = ProductCard des Design-Systems plus Merkliste-Herz */
function ProductTile({ product, wished, onWish, onReserve, compact }) {
  return (
    <div style={{ position: "relative" }}>
      {product.topLabel && (
        <span style={{ display: "block", fontFamily: "var(--font-sans)", fontSize: "var(--size-micro)", letterSpacing: "var(--tracking-eyebrow)", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: "var(--space-2)" }}>{product.topLabel}</span>
      )}
      <ProductCard kind={product.kind.toUpperCase()} name={product.name} price={product.price} material={compact ? undefined : product.materialLabel}
        condition={compact ? undefined : product.zustand} availability={product.availability} sku={product.id} image={product.image}
        onOpen={() => { location.href = "produkt.html?id=" + product.id; }} onReserve={() => onReserve(product)} />
      {(product.availability !== "verkauft" || wished) && (
        <div style={{ position: "absolute", top: product.topLabel ? 34 : 10, right: 10 }}>
          <IconButton icon="heart" label={wished ? t("produkt.merklisteEntfernen", "Von der Merkliste entfernen") : t("produkt.aufMerkliste", "Auf die Merkliste")}
            onClick={() => onWish(product.id)} filled={wished}
            style={{ background: wished ? "none" : "rgba(252,250,246,.86)", color: wished ? "#C1443A" : "var(--text-muted)" }} />
        </div>
      )}
    </div>
  );
}

function ProductGrid({ items, store, onReserve, min, compact, gap }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(" + (min || 260) + "px, 1fr))", gap: gap || (compact ? "var(--space-5)" : "var(--grid-gap-lg)") }}>
      {items.map(p => (
        <ProductTile key={p.id} product={p} wished={store.wish.includes(p.id)} onWish={store.toggleWish} onReserve={onReserve} compact={compact} />
      ))}
    </div>
  );
}

/* Reservierungsflow: Dialog des Design-Systems, danach ist das Stück überall reserviert */
function useReserveFlow(store) {
  const [piece, setPiece] = React.useState(null);
  // Referenzstabil halten (nur neu berechnen, wenn piece wirklich wechselt) — sonst
  // erzeugt jedes Re-Render (z.B. store.addReserved beim Absenden) ein neues Objekt,
  // das ReserveDialog als "anderes Produkt" interpretiert und Formular + Bestätigung
  // sofort wieder zurücksetzt, bevor die Nutzerin sie sieht.
  const dialogProduct = React.useMemo(() => (
    piece ? { name: piece.name, kind: piece.kind, price: piece.price, material: piece.materialLabel, sku: piece.id, image: piece.image } : null
  ), [piece]);
  const handleSubmit = (data) => {
    store.addReserved(piece.id);
    // Anfrage an den Server: legt sie in der Reservierungs-Liste ab und schickt
    // eine E-Mail an hallo@weiterfunkeln.ch. Läuft im Hintergrund — der Dialog
    // zeigt die Bestätigung unabhängig davon sofort an (Fallback bleibt der
    // "Lieber direkt schreiben"-Mailto-Link im Dialog selbst).
    fetch("https://weiterfunkeln.ch/backend/reserve.php", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        sku: piece.id,
        vorname: data.vorname,
        nachname: data.nachname,
        email: data.email,
        telefon: data.telefon,
        nachricht: data.nachricht,
      }),
    }).catch((err) => {
      console.error("Weiterfunkeln: Reservierungsanfrage konnte nicht gesendet werden.", err);
    });
  };
  const dialog = (
    <ReserveDialog open={!!piece} product={dialogProduct}
      mailto="hallo@weiterfunkeln.ch" onClose={() => setPiece(null)} onSubmit={handleSubmit} />
  );
  return { open: setPiece, dialog };
}

function Breadcrumbs({ trail }) {
  return (
    <nav style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap", alignItems: "center", padding: "var(--space-5) 0" }} aria-label="Brotkrumen">
      {trail.map((t, i) => (
        <React.Fragment key={t.label}>
          {i > 0 && <span style={{ color: "var(--text-faint)" }}>·</span>}
          {t.href ? <a href={t.href} style={{ ...window.wfEyebrow, color: "var(--text-muted)", borderColor: "transparent" }}>{t.label}</a>
            : <span style={{ ...window.wfEyebrow, color: "var(--text-faint)" }}>{t.label}</span>}
        </React.Fragment>
      ))}
    </nav>
  );
}

function PageHead({ eyebrow, title, intro, gradient }) {
  return (
    <div style={{ display: "grid", gap: "var(--space-4)", maxWidth: 760 }}>
      {eyebrow && <span style={{ ...window.wfEyebrow, color: "var(--text-muted)" }}>{eyebrow}</span>}
      <h1 style={gradient
        ? { font: "var(--type-hero)", background: "var(--gradient-headline)", WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent" }
        : { font: "var(--type-display)" }}>{title}</h1>
      {intro && <p style={{ font: "var(--type-body-lg)", color: "var(--text-muted)", maxWidth: "56ch", textWrap: "pretty" }}>{intro}</p>}
    </div>
  );
}
Object.assign(window, { ProductTile, ProductGrid, useReserveFlow, Breadcrumbs, PageHead });