// booking-modal.jsx — Cal.com booking embed (DE/ES via window.t)

const { useState: useBS, useEffect: useBE, useRef: useBR } = React;

// ─── Cal.com Konfiguration ──────────────────────────────────────────────────
// Link: https://cal.eu/immoki/analyse
//  → calLink (ohne Domain):   "immoki/analyse"
//  → origin (Domain):          "https://cal.eu"
// Beide Sprachen nutzen denselben Cal.com-Link (Cal.com erkennt die Sprache
// des Besuchers selbst; optional kann man pro Sprache einen Event-Type anlegen).
const CAL_LINK = "immoki/analyse";
const CAL_ORIGIN = "https://cal.eu";
const CAL_EMBED_JS = CAL_ORIGIN + "/embed/embed.js";
const CAL_NS = "analyse";
const CAL_BRAND = "#009660"; // Grüner Akzent der Landingpage

// Lädt das Cal.com-Embed-Script genau einmal und initialisiert den Namespace.
function ensureCal() {
  if (window.__calReady) return;
  (function (C, A, L) {
    let p = function (a, ar) { a.q.push(ar); };
    let d = C.document;
    C.Cal = C.Cal || function () {
      let cal = C.Cal; let ar = arguments;
      if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; }
      if (ar[0] === L) {
        const api = function () { p(api, arguments); };
        const namespace = ar[1];
        api.q = api.q || [];
        if (typeof namespace === "string") { cal.ns[namespace] = cal.ns[namespace] || api; p(cal.ns[namespace], ar); p(cal, ["initNamespace", namespace]); }
        else p(cal, ar);
        return;
      }
      p(cal, ar);
    };
  })(window, CAL_EMBED_JS, "init");

  window.Cal("init", CAL_NS, { origin: CAL_ORIGIN });
  window.__calReady = true;
}

function BookingModal({ open, onClose }) {
  const t = window.t || ((k) => k);
  const lang = window.useLang ? window.useLang().lang : "de";
  const mountRef = useBR(null);

  useBE(() => {
    if (open && window.track) window.track("booking_modal_opened");
  }, [open]);

  // Body-Scroll sperren + Esc-Schließen
  useBE(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [open, onClose]);

  // Cal.com Inline-Embed in den Modal-Body laden
  useBE(() => {
    if (!open) return;
    ensureCal();
    const el = mountRef.current;
    if (!el) return;
    el.innerHTML = "";
    try {
      window.Cal.ns[CAL_NS]("inline", {
        elementOrSelector: el,
        calLink: CAL_LINK,
        config: { layout: "month_view", theme: "light" },
      });
      window.Cal.ns[CAL_NS]("ui", {
        cssVarsPerTheme: { light: { "cal-brand": CAL_BRAND } },
        hideEventTypeDetails: false,
        layout: "month_view",
      });
      // Buchung erfolgreich → an n8n / Analytics melden
      window.Cal.ns[CAL_NS]("on", {
        action: "bookingSuccessful",
        callback: () => { if (window.track) window.track("booking_completed", { lang }); },
      });
    } catch (e) {}
  }, [open, lang]);

  if (!open) return null;

  return (
    <div className="modal-veil" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal modal-cal modal-split" role="dialog" aria-modal="true">
        <button className="x" onClick={onClose} aria-label={t("mod.btn.close")}><Icon name="x" size={16} stroke={2}/></button>

        <div className="modal-split-grid">
          <div className="modal-intro">
            <span className="mi-eyebrow">{t("mod.intro.eyebrow")}</span>
            <h3 className="mi-h">
              {t("mod.intro.h1")} <span className="mi-accent">{t("mod.intro.h2")}</span>
            </h3>
            <p className="mi-p">{t("mod.intro.p")}</p>

            <div className="mi-expect">
              <span className="mi-expect-label">{t("mod.expect.label")}</span>
              <div className="mi-expect-h">
                <b>{t("mod.expect.h1")}</b>
                <span className="mi-accent">{t("mod.expect.h2")}</span>
              </div>
              <ul className="mi-list">
                <li><span className="mi-ck"><Icon name="check" size={11} stroke={3}/></span>{t("mod.expect.1")}</li>
                <li><span className="mi-ck"><Icon name="check" size={11} stroke={3}/></span>{t("mod.expect.2")}</li>
                <li><span className="mi-ck"><Icon name="check" size={11} stroke={3}/></span>{t("mod.expect.3")}</li>
                <li><span className="mi-ck"><Icon name="check" size={11} stroke={3}/></span>{t("mod.expect.4")}</li>
              </ul>
              <p className="mi-foot">{t("mod.expect.foot")}</p>
            </div>
          </div>

          <div className="modal-cal-col">
            <div className="cal-embed-wrap">
              <div ref={mountRef} className="cal-embed" aria-busy="true"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.BookingModal = BookingModal;