// QuoteModal — minimal frame around the BookingKoala booking form.
// The booking iframe is the entire purpose. Chrome is reduced to a tiny
// wordmark + close affordance so nothing competes with the form itself.

const QT = window.Tokens;

const DEFAULT_BOOKING_SRC = "https://apexcleaningsolutionsfw.bookingkoala.com/booknow?embed=true";

function getBookingSrc() {
  return window.APEX_BK_BOOKING_URL || DEFAULT_BOOKING_SRC;
}

function QuoteModal({ open, onClose }) {
  const [integrationVersion, setIntegrationVersion] = React.useState(0);
  const src = React.useMemo(() => getBookingSrc(), [integrationVersion]);
  const [hoverClose, setHoverClose] = React.useState(false);

  React.useEffect(() => {
    const onIntegrationUpdate = () => setIntegrationVersion((prev) => prev + 1);
    onIntegrationUpdate();
    window.addEventListener("apex:integrations-updated", onIntegrationUpdate);
    return () => window.removeEventListener("apex:integrations-updated", onIntegrationUpdate);
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div role="dialog" aria-modal="true" aria-label="Apex Cleaning booking"
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 100,
        background: "rgba(31,29,29,0.62)", backdropFilter: "blur(8px)",
        display: "grid", placeItems: "center",
        padding: 14,
        animation: "apex-fade-in 180ms ease-out",
      }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: QT.white, color: QT.charcoal,
        borderRadius: 20,
        border: `1px solid ${QT.border}`,
        boxShadow: "0 42px 110px rgba(31,29,29,0.42)",
        width: "min(820px, 100%)",
        height: "min(820px, 94vh)",
        display: "grid",
        gridTemplateRows: "auto 1fr",
        position: "relative",
        animation: "apex-slide-up 240ms cubic-bezier(.16,1,.3,1) both",
        overflow: "hidden",
      }}>
        <header style={{
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
          padding: "12px 14px 12px 18px",
          borderBottom: `1px solid ${QT.border}`,
          background: QT.white,
        }}>
          <p style={{
            margin: 0, fontFamily: QT.fontSans, fontSize: 10.5, fontWeight: 700,
            textTransform: "uppercase", letterSpacing: "0.24em",
            color: QT.burgundy,
          }}>
            Apex Cleaning Solutions · Fort Wayne
          </p>
          <button onClick={onClose} aria-label="Close booking"
            onMouseEnter={() => setHoverClose(true)}
            onMouseLeave={() => setHoverClose(false)}
            style={{
              all: "unset", cursor: "pointer",
              width: 32, height: 32, borderRadius: 999,
              display: "grid", placeItems: "center",
              color: QT.burgundy,
              background: hoverClose ? "rgba(91,22,25,0.08)" : "transparent",
              transition: "background 180ms",
            }}>
            <Icons.X size={16}/>
          </button>
        </header>

        <iframe
          title="Apex Cleaning booking form"
          src={src}
          width="100%"
          height="100%"
          loading="lazy"
          allow="payment *; clipboard-write"
          style={{
            border: 0, display: "block",
            width: "100%", height: "100%",
            background: QT.white,
          }}
        />
      </div>
    </div>
  );
}

window.QuoteModal = QuoteModal;