/* global React, ReactDOM */
// ACN-Cars · WordPress App-Shell
// Verwendet window.ACN_DATA, das von WordPress per wp_localize_script bereitgestellt wird.

const { useState, useEffect } = React;

function ACNApp() {
  const data = window.ACN_DATA || {};
  const { vehicles = [], addons = [], deals = [], locations = [], contact = {}, boot = {} } = data;

  const [page, setPage] = useState(boot.view || "home");
  // v2.2.6 — Default-Vehicle aus boot.defaultVehicleId (= oberstes nach menu_order)
  const [vehicleId, setVehicleId] = useState(boot.vehicleSeed || boot.defaultVehicleId || (vehicles[0] && vehicles[0].id) || null);
  const [favs, setFavs] = useState([]);
  // v2.2.12 — Favoriten-FAB (wird nur eingeblendet, wenn Plugin-Header aus ist)
  const [showFavs, setShowFavs] = useState(false);
  const [comparing, setComparing] = useState([]);
  const [showCompare, setShowCompare] = useState(false);
  const [bookingDone, setBookingDone] = useState(null);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState(null);
  const [theme, setTheme] = useState(boot.theme || "dark");
  // v2.2.4 — Aktive Aktion (z. B. Wochenend-Pauschale), wenn der User über eine Aktions-Card kommt.
  // Steuert Pre-Fill der Daten, Bonus-Tag-Toggle und den Aktions-Hinweis im Buchungsformular.
  const [dealSeed, setDealSeed] = useState(null);
  // v2.2.16 — Aktion-Kontext für die Detail-Seite. Wenn der User aus einer
  // Aktion auf ein Fahrzeug klickt, fliesst die Aktion durch, damit DetailPage
  // den Aktions-Banner, den Aktions-Preis und „Mit Aktion buchen" anzeigt.
  const [dealContext, setDealContext] = useState(null);

  useEffect(() => {
    const root = document.querySelector(".acn-app-root");
    if (root) {
      root.setAttribute("data-theme", theme);
      // Custom Theme-Farben aus Backend-Settings als CSS-Variablen
      if (boot.bgDark)      root.style.setProperty("--bg-dark",      boot.bgDark);
      if (boot.surfaceDark) root.style.setProperty("--surface-dark", boot.surfaceDark);
      if (boot.bgLight)     root.style.setProperty("--bg-light",     boot.bgLight);
      if (boot.surfaceLight)root.style.setProperty("--surface-light",boot.surfaceLight);
      // v2.2.5 — Buchen-Button-Farben (separat konfigurierbar)
      root.style.setProperty("--btn-bg", boot.btnBg || boot.accent || "#0A0A0A");
      root.style.setProperty("--btn-fg", boot.btnFg || "#FFFFFF");
    }
    document.documentElement.style.setProperty("--accent", boot.accent || "#00D4FF");
    document.documentElement.style.setProperty("--btn-bg", boot.btnBg || boot.accent || "#0A0A0A");
    document.documentElement.style.setProperty("--btn-fg", boot.btnFg || "#FFFFFF");
  }, [theme, boot.accent, boot.bgDark, boot.surfaceDark, boot.bgLight, boot.surfaceLight, boot.btnBg, boot.btnFg]);

  useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [page]);

  const currentVehicle = vehicles.find(v => v.id === vehicleId);

  const onFav = id => setFavs(f => f.includes(id) ? f.filter(x => x !== id) : [...f, id]);
  const onCompare = id => setComparing(c => {
    if (c.includes(id)) return c.filter(x => x !== id);
    if (c.length >= 3) return c;
    return [...c, id];
  });
  // v2.2.6 — Tier-Hint: Wenn Karte einen Tier vorausgewählt hat, BookingPage diesen Tier voreinstellen
  const [bookingTierHours, setBookingTierHours] = useState(null);
  const onBook = (v, tierHours) => {
    setVehicleId(v.id);
    setDealSeed(null);
    setBookingTierHours(tierHours || null);
    setPage("booking");
  };
  // v2.2.16 — onOpen akzeptiert einen optionalen Deal-Parameter. Wenn der
  // User aus einer Aktion auf ein Fahrzeug klickt, fliesst die Aktion mit,
  // damit DetailPage den Aktions-Banner zeigt und „Mit Aktion buchen" CTA.
  const onOpen = (v, deal) => {
    setVehicleId(v.id);
    setDealContext(deal && typeof deal === "object" ? deal : null);
    setPage("detail");
  };
  // v2.2.4 — Über Aktions-Card buchen: Aktion mitgeben, damit BookingPage Daten vorbelegen
  // und Bonus-Tag-Toggle anzeigen kann. Erstes Fahrzeug der Aktion wird vorausgewählt.
  // v2.2.19 — Optionales `vehicle`: wenn ein konkretes Fahrzeug mitgegeben wird (z. B.
  // wenn der User in der Aktion-Magazin-Karte auf ein Auto klickt), wird dieses
  // Fahrzeug vorausgewählt — sonst Fallback auf deal.vehicles[0].
  const onDealBook = (deal, vehicle) => {
    if (vehicle && vehicle.id) {
      setVehicleId(vehicle.id);
    } else if (deal && Array.isArray(deal.vehicles) && deal.vehicles.length > 0) {
      setVehicleId(deal.vehicles[0]);
    }
    setDealSeed(deal || null);
    setPage("booking");
  };

  // ============ REST Submit ============
  const submitInquiry = async (formData) => {
    setSubmitting(true);
    setSubmitError(null);
    try {
      const res = await fetch(boot.apiBase + "/inquiry", {
        method: "POST",
        headers: { "Content-Type": "application/json", "X-WP-Nonce": boot.nonce },
        body: JSON.stringify({
          pickup_loc: formData.pickupLoc,
          return_loc: formData.returnLoc,
          pickup_at:  formData.pickupAt,
          return_at:  formData.returnAt,
          vehicle_id: formData.vehicleId,
          addons:     formData.addons,
          extra_km:   parseInt(formData.extraKm || 0, 10),
          name:       formData.name,
          email:      formData.email,
          phone:      formData.phone,
          license:    formData.license,
          message:    formData.message || "",
          consent:    !!formData.consent,
          website:    formData.website || "",
          // v2.2.37 — Aktion-Kontext (Weekend-Pauschale) auch bei Inquiry-Submit mitgeben,
          // damit der Server-Total mit dem im Frontend angezeigten Pauschalpreis übereinstimmt.
          deal_id:    (dealSeed && dealSeed.id) ? dealSeed.id : "",
        }),
      });
      const json = await res.json();
      if (!res.ok || !json.success) {
        const msg = json.message || (json.code ? json.code : "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.");
        setSubmitError(msg);
        setSubmitting(false);
        return;
      }
      setBookingDone({ ...formData, ref: json.ref, total: json.total });
      setPage("done");
    } catch (err) {
      setSubmitError("Netzwerk-Fehler. Bitte versuchen Sie es erneut oder kontaktieren Sie uns direkt: " + (contact.phone || ""));
    } finally {
      setSubmitting(false);
    }
  };

  // Plugin-Header / -Footer können in den Settings ausgeblendet werden (für Themes mit eigener Nav).
  const showPluginHeader = boot.showPluginHeader !== false; // default: true (legacy)
  const showPluginFooter = boot.showPluginFooter !== false; // default: true

  return (
    <div>
      {showPluginHeader && (
        <Header page={page} setPage={setPage} theme={theme} setTheme={setTheme} favs={favs.length} contact={contact} logo={boot.logo} />
      )}

      {page === "home" && (
        <window.HomePage
          vehicles={vehicles} deals={deals} locations={locations}
          favs={favs} onFav={onFav} onCompare={onCompare} comparing={comparing}
          onBook={onBook} onOpen={onOpen}
          onDealBook={onDealBook}
          goPage={setPage}
          contact={contact}
          boot={boot}
        />
      )}
      {/* v2.2.41 — Flotte-Seite entfernt. HomePage zeigt alle Fahrzeuge im Grid. */}
      {page === "fleet" && (
        <window.HomePage
          vehicles={vehicles} deals={deals} locations={locations}
          favs={favs} onFav={onFav} onCompare={onCompare} comparing={comparing}
          onBook={onBook} onOpen={onOpen}
          onDealBook={onDealBook}
          goPage={setPage}
          contact={contact}
          boot={boot}
        />
      )}
      {page === "detail" && currentVehicle && (
        <window.DetailPage
          vehicle={currentVehicle}
          deal={dealContext}
          contact={contact}
          onBack={() => { setDealContext(null); setPage(dealContext ? "deals" : "home"); }}
          onBook={onBook}
          onDealBook={onDealBook}
          onCompare={onCompare}
          comparing={comparing.includes(vehicleId)}
          fav={favs.includes(vehicleId)}
          onFav={onFav}
        />
      )}
      {page === "booking" && (
        <BookingWrapper
          vehicles={vehicles} addons={addons} locations={locations}
          initialVehicleId={vehicleId}
          dealSeed={dealSeed}
          tierHours={bookingTierHours}
          contact={contact}
          submitting={submitting}
          submitError={submitError}
          onComplete={submitInquiry}
          onHome={() => setPage("home")}
          onFleet={() => setPage("home")}
        />
      )}
      {page === "deals" && (
        <window.DealsPage
          deals={deals}
          vehicles={vehicles}
          onBook={onDealBook}
          onOpen={onOpen}
          onHome={() => setPage("home")}
          onFleet={() => setPage("home")}
        />
      )}
      {/* v2.2.6 — "Kalkulator"-Seite wurde durch "Vergleichen" ersetzt.
         Legacy-Route page === "calc" leitet auf ComparePage. */}
      {(page === "calc" || page === "compare") && (
        <window.ComparePage
          vehicles={vehicles}
          onHome={() => setPage("home")}
          onFleet={() => setPage("home")}
          onBook={onBook}
        />
      )}
      {page === "done" && <DonePage data={bookingDone} contact={contact} onHome={() => setPage("home")} />}

      {showPluginFooter && <Footer setPage={setPage} contact={contact} logo={boot.logo} links={boot.links} />}

      {comparing.length > 0 && !showCompare && (
        <div className="compare-bar">
          {comparing.map(id => {
            const v = vehicles.find(x => x.id === id);
            return v ? <div key={id} className="compare-thumb" style={{ backgroundImage: `url(${v.image})` }} /> : null;
          })}
          <span style={{ fontSize: 13, fontWeight: 500, padding: "0 6px" }}>
            {comparing.length} zum Vergleich
          </span>
          <button className="btn btn-accent btn-sm" onClick={() => setShowCompare(true)} disabled={comparing.length < 2}>
            Vergleichen
          </button>
          <button onClick={() => setComparing([])} style={{ color: "rgba(255,255,255,0.6)", padding: "0 8px", fontSize: 18 }}>✕</button>
        </div>
      )}

      {showCompare && (
        <window.CompareOverlay
          vehicles={vehicles} ids={comparing}
          onClose={() => setShowCompare(false)}
          onRemove={id => {
            const next = comparing.filter(x => x !== id);
            setComparing(next);
            if (next.length === 0) setShowCompare(false);
          }}
        />
      )}

      {boot.showWhatsApp && contact.whatsappLink && (
        <a className="wa-fab" href={contact.whatsappLink} target="_blank" rel="noopener" aria-label="WhatsApp">
          <window.Icon.WhatsApp />
        </a>
      )}

      {/* v2.2.12 — Favoriten-FAB: nur wenn Plugin-Header ausgeblendet ist (sonst
          Favoriten-Pille im Header). Öffnet Slide-up-Sheet mit Favoriten-Liste. */}
      {!showPluginHeader && favs.length > 0 && (
        <button
          className="fav-fab"
          onClick={() => setShowFavs(true)}
          aria-label={`Favoriten (${favs.length})`}
          title="Favoriten"
        >
          <window.Icon.Heart filled />
          <span className="fav-fab-count">{favs.length}</span>
        </button>
      )}

      {showFavs && (
        <>
          <div className="fav-sheet-backdrop" onClick={() => setShowFavs(false)} />
          <aside className="fav-sheet" role="dialog" aria-label="Favoriten">
            <div className="fav-sheet-head">
              <div className="fav-sheet-title">
                <window.Icon.Heart filled /> Favoriten ({favs.length})
              </div>
              <button
                className="fav-sheet-close"
                onClick={() => setShowFavs(false)}
                aria-label="Schliessen"
              >
                ✕
              </button>
            </div>
            {favs.length === 0 ? (
              <div className="fav-sheet-empty">
                Noch keine Favoriten gespeichert.
              </div>
            ) : (
              <div className="fav-sheet-list">
                {favs.map(id => {
                  const v = vehicles.find(x => x.id === id);
                  if (!v) return null;
                  const chfFn = window.chf || (n => n);
                  return (
                    <div className="fav-sheet-item" key={id}>
                      <div
                        className="fav-sheet-thumb"
                        style={{ backgroundImage: `url(${v.image})` }}
                        onClick={() => { setShowFavs(false); onOpen(v); }}
                        role="button"
                        aria-label={`${v.brand} ${v.model} ansehen`}
                      />
                      <div className="fav-sheet-info">
                        <div className="brand">{v.brand}</div>
                        <div className="model">{v.model}</div>
                        <div className="price">
                          ab CHF {chfFn(v.pricePerDay)} / Tag
                        </div>
                      </div>
                      <div className="fav-sheet-actions">
                        <button
                          className="btn btn-primary btn-sm"
                          onClick={() => { setShowFavs(false); onBook(v, null); }}
                        >
                          Buchen
                        </button>
                        <button
                          className="btn btn-ghost btn-sm"
                          onClick={() => { setShowFavs(false); onOpen(v); }}
                        >
                          Details
                        </button>
                        <button
                          className="fav-sheet-remove"
                          onClick={() => onFav(id)}
                          aria-label="Aus Favoriten entfernen"
                          title="Entfernen"
                        >
                          <window.Icon.Heart filled />
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </aside>
        </>
      )}
    </div>
  );
}

// Header
function Header({ page, setPage, theme, setTheme, favs, contact, logo }) {
  // "Aktionen" bewusst nicht im Header — Aktionen sind auf der Startseite prominent
  // v2.2.6 — "Kalkulator" ersetzt durch "Vergleichen"
  // v2.2.41 — „Flotte"-Link entfernt: alle Fahrzeuge sind direkt auf der Startseite im Grid sichtbar.
  const items = [
    { id: "home",    l: "Start" },
    { id: "compare", l: "Vergleichen" },
    { id: "booking", l: "Anfragen" },
  ];
  return (
    <header className="site-header">
      <div className="container site-header-inner">
        <a className="brand" onClick={() => setPage("home")} style={{ cursor: "pointer" }}>
          {logo
            ? <img src={logo} alt="ACN-Cars" style={{ height: 28, width: "auto" }} />
            : <><span className="brand-mark">A</span><span>ACN-CARS</span></>
          }
          <span style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 400, marginLeft: 8, letterSpacing: 0 }}>
            {contact.city || "Neuhausen a/Rh"}
          </span>
        </a>
        <nav className="nav">
          {items.map(it => (
            <a key={it.id} onClick={() => setPage(it.id)} aria-current={page === it.id ? "page" : null} style={{ cursor: "pointer" }}>
              {it.l}
            </a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <button
            className="btn btn-ghost btn-sm"
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
            aria-label="Theme"
            style={{ width: 36, padding: 0, height: 36, borderRadius: 999 }}
          >
            {theme === "dark" ? <window.Icon.Sun /> : <window.Icon.Moon />}
          </button>
          {favs > 0 && (
            <span className="pill" title="Favoriten" style={{ fontWeight: 600 }}>
              <window.Icon.Heart filled /> {favs}
            </span>
          )}
          <button className="btn btn-primary btn-sm" onClick={() => setPage("booking")}>Jetzt anfragen</button>
        </div>
      </div>
    </header>
  );
}

// Footer mit dynamischen Kontaktdaten
function Footer({ setPage, contact, logo, links }) {
  const L = links || {};
  const renderLink = (label, url) =>
    url
      ? <a href={url} target="_blank" rel="noopener">{label}</a>
      : <span className="muted">{label}</span>;
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand footer-brand" style={{ fontSize: 22, marginBottom: 16 }}>
              {logo
                ? <img src={logo} alt={contact.companyName || "ACN-Cars"} style={{ height: 36, width: "auto" }} />
                : <>
                    <span className="brand-mark" style={{ width: 36, height: 36, fontSize: 14 }}>A</span>
                    {(contact.companyName || "ACN-CARS GMBH").toUpperCase()}
                  </>
              }
            </div>
            <p className="muted" style={{ fontSize: 14, maxWidth: "36ch" }}>
              Premium- und Sportwagen-Vermietung in {contact.city || "Neuhausen am Rheinfall"}.
              Persönlich, transparent, schnell.
            </p>
          </div>
          <div>
            <h4>Flotte</h4>
            <ul>
              <li><a onClick={() => setPage("home")}>Alle Fahrzeuge</a></li>
              <li><a onClick={() => setPage("deals")}>Aktionen</a></li>
              <li><a onClick={() => setPage("compare")}>Vergleichen</a></li>
              <li><a onClick={() => setPage("booking")}>Anfragen</a></li>
            </ul>
          </div>
          <div>
            <h4>Service</h4>
            <ul>
              <li><a onClick={() => setPage("compare")}>Vergleichen</a></li>
              <li><a onClick={() => setPage("booking")}>Anfragen</a></li>
              <li><a onClick={() => setPage("home")}>Lieferung & Abholung</a></li>
              <li><a onClick={() => setPage("home")}>Versicherung</a></li>
            </ul>
          </div>
          <div>
            <h4>Kontakt</h4>
            <ul>
              {contact.phone && <li><a href={`tel:${contact.phone.replace(/\s/g, '')}`}>{contact.phone}</a></li>}
              {contact.email && <li><a href={`mailto:${contact.email}`}>{contact.email}</a></li>}
              {(contact.street || contact.city) && <li>{contact.street}{contact.street && contact.city ? ", " : ""}{contact.zip} {contact.city}</li>}
              {contact.whatsappLink && <li><a href={contact.whatsappLink} target="_blank" rel="noopener">WhatsApp</a></li>}
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} {contact.companyName || "ACN-Cars GmbH"} · Alle Rechte vorbehalten</span>
          <span className="footer-links">
            {renderLink("Impressum", L.impressum)}
            <span className="footer-links-sep">·</span>
            {renderLink("Datenschutz", L.datenschutz)}
            <span className="footer-links-sep">·</span>
            {renderLink("AGB", L.agb)}
          </span>
        </div>
      </div>
    </footer>
  );
}

// Booking-Wrapper: hängt Submit-Status & Fehler ans BookingPage
function BookingWrapper({ vehicles, addons, locations, initialVehicleId, dealSeed, tierHours, contact, submitting, submitError, onComplete, onHome, onFleet }) {
  if (!vehicles.length) {
    return (
      <main className="section">
        <div className="container">
          <h1 className="h-1">Buchungs-Anfrage</h1>
          <p className="lead">Aktuell sind keine Fahrzeuge eingepflegt. Bitte legen Sie im Admin-Bereich Fahrzeuge an.</p>
        </div>
      </main>
    );
  }
  return (
    <div>
      {submitError && (
        <div style={{
          background: "#5c1d1d", color: "#ffb4b4", border: "1px solid #8c2c2c", padding: "12px 20px",
          borderRadius: 6, margin: "16px auto", maxWidth: 720, textAlign: "center", fontSize: 14
        }}>
          {submitError}
        </div>
      )}
      {submitting && (
        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.55)", zIndex: 9999, display: "grid", placeItems: "center" }}>
          <div style={{ background: "var(--bg)", padding: "24px 36px", borderRadius: 8, color: "var(--ink)" }}>
            <div className="acn-spinner" />
            <div style={{ marginTop: 14, fontSize: 14 }}>Anfrage wird gesendet…</div>
          </div>
        </div>
      )}
      <window.BookingPage
        vehicles={vehicles} addons={addons} locations={locations}
        initialVehicleId={initialVehicleId}
        dealSeed={dealSeed}
        tierHours={tierHours}
        contact={contact}
        onComplete={onComplete}
        onHome={onHome}
        onFleet={onFleet}
      />
    </div>
  );
}

// Done-Seite mit echter Referenz
function DonePage({ data, contact, onHome }) {
  const chf = window.chf || (n => n);
  return (
    <main className="section-lg" style={{ textAlign: "center" }}>
      <div className="container" style={{ maxWidth: 640 }}>
        <div style={{ width: 80, height: 80, borderRadius: 999, background: "var(--accent)", margin: "0 auto 32px", display: "grid", placeItems: "center", color: "#000" }}>
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6 9 17l-5-5" /></svg>
        </div>
        <h1 className="h-1" style={{ margin: "0 0 16px" }}>Anfrage erhalten.</h1>
        <p className="lead">
          Vielen Dank, {data?.name || "wir freuen uns auf Sie"}. Wir melden uns innerhalb von 24 Stunden persönlich bei Ihnen.
          Eine Bestätigung mit allen Details geht an <strong>{data?.email}</strong>.
        </p>
        <div className="card" style={{ padding: 24, margin: "32px 0", textAlign: "left" }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
            <span className="muted">Referenz</span>
            <span className="mono" style={{ fontWeight: 600 }}>{data?.ref || "—"}</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span className="muted">Vorläufiges Total</span>
            <span className="mono" style={{ fontWeight: 600 }}>CHF {chf(data?.total || 0)}</span>
          </div>
        </div>
        <p className="muted" style={{ fontSize: 13, marginBottom: 24 }}>
          Sie haben Fragen? Rufen Sie uns direkt an: <strong>{contact.phone}</strong>
          {contact.whatsappLink && <> · <a href={contact.whatsappLink} target="_blank" rel="noopener" style={{ color: "var(--accent)" }}>WhatsApp</a></>}
        </p>
        <button className="btn btn-primary btn-lg" onClick={onHome}>Zur Startseite</button>
      </div>
    </main>
  );
}

// ============ Mount ============
(function () {
  const rootId = window.__ACN_ROOT_ID__;
  const el = rootId ? document.getElementById(rootId) : document.querySelector(".acn-app-root");
  if (!el) return;
  ReactDOM.createRoot(el).render(<ACNApp />);
})();