// PonteREI — Modal, InterestForm, MobilePreview, TweaksMount, App boot
// Uses LocaleContext / RouterContext / ToastProvider from utils.jsx (on window)

// ===== Modal =====
function Modal({ open, onClose, title, children, size = "md" }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className={`modal modal-${size}`} onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <div className="modal-header">
          <h3>{title}</h3>
          <button className="modal-close" onClick={onClose} aria-label="Close"><Icon.Close /></button>
        </div>
        <div className="modal-body">{children}</div>
      </div>
    </div>
  );
}

// ===== InterestForm =====
function InterestForm({ property, defaultModality = "cotas", onSuccess }) {
  const { locale } = useLocale();
  const { push } = useToast();
  const [form, setForm] = useState({
    name: "", email: "", phone: "", country: "BR",
    modality: defaultModality,
    amount: property ? property.financials.shareUnitPrice * 10 : 2500,
    message: "",
    consent: false,
  });
  const [errs, setErrs] = useState({});
  const [submitting, setSubmitting] = useState(false);

  const set = (k, v) => { setForm((c) => ({ ...c, [k]: v })); if (errs[k]) setErrs((c) => ({ ...c, [k]: undefined })); };

  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = t("form.errRequired", locale);
    if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) er.email = t("form.errEmailInvalid", locale);
    if (!form.consent) er.consent = t("form.errRequired", locale);
    if (Object.keys(er).length) return setErrs(er);
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      push(locale === "pt"
        ? "Recebemos seu interesse! Nosso time entrará em contato em até 24h úteis."
        : "We received your interest! Our team will reach out within 1 business day.");
      onSuccess?.();
    }, 600);
  };

  return (
    <form onSubmit={submit} className="form-stack">
      <div className="form-row">
        <div className="field">
          <label>{t("form.name", locale)}</label>
          <input type="text" className="input" value={form.name} onChange={(e) => set("name", e.target.value)} />
          {errs.name && <div className="error">{errs.name}</div>}
        </div>
        <div className="field">
          <label>{t("form.email", locale)}</label>
          <input type="email" className="input" value={form.email} onChange={(e) => set("email", e.target.value)} />
          {errs.email && <div className="error">{errs.email}</div>}
        </div>
      </div>
      <div className="form-row">
        <div className="field">
          <label>{t("form.phone", locale)}</label>
          <input type="tel" className="input" value={form.phone} onChange={(e) => set("phone", e.target.value)} placeholder="+55 11 9..." />
        </div>
        <div className="field">
          <label>{locale === "pt" ? "Aceito receber comunicacoes sobre este e outros imoveis. Seus dados estao seguros conosco." : "I agree to receive communications about this and other properties. Your data is safe with us.", locale)}</label>
          <select className="select" value={form.country} onChange={(e) => set("country", e.target.value)}>
            <option value="BR">🇧🇷 Brasil</option>
            <option value="US">🇺🇸 United States</option>
            <option value="PT">🇵🇹 Portugal</option>
            <option value="other">{locale === "pt" ? "Outro" : "Other"}</option>
          </select>
        </div>
      </div>
      {property && property.modality.length === 2 && (
        <div className="field">
          <label>{t("form.modality", locale)}</label>
          <div className="filter-options" style={{ flexDirection: "row", gap: 16 }}>
            <label className="filter-option"><input type="radio" name="mod" checked={form.modality === "cotas"} onChange={() => set("modality", "cotas")} /> {t("modalities.cotasTitle", locale)}</label>
            <label className="filter-option"><input type="radio" name="mod" checked={form.modality === "inteiro"} onChange={() => set("modality", "inteiro")} /> {t("modalities.inteiroTitle", locale)}</label>
          </div>
        </div>
      )}
      <div className="field">
        <label>{t("form.amount", locale)}: <strong className="serif" style={{ fontSize: 18 }}>{formatBRL(form.amount)}</strong></label>
        <input type="range" min="250" max="500000" step="250" value={form.amount} onChange={(e) => set("amount", +e.target.value)} style={{ width: "100%", accentColor: "var(--primary)" }} />
        <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>R$ 250 — R$ 500.000</div>
      </div>
      <div className="field">
        <label>{t("form.message", locale)}</label>
        <textarea className="textarea" value={form.message} onChange={(e) => set("message", e.target.value)} placeholder={locale === "pt" ? "Pergunte qualquer coisa. Sem compromisso." : "Ask anything. No commitment."} />
      </div>
      <label style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--text-muted)", lineHeight: 1.5, alignItems: "flex-start" }}>
        <input type="checkbox" checked={form.consent} onChange={(e) => set("consent", e.target.checked)} style={{ marginTop: 3 }} />
        <span>{locale === "pt" ? "Aceito receber comunicacoes sobre este e outros imoveis. Seus dados estao seguros conosco." : "I agree to receive communications about this and other properties. Your data is safe with us.", locale)}</span>
      </label>
      {errs.consent && <div className="error">{errs.consent}</div>}
      <button type="submit" disabled={submitting} className="btn btn-primary btn-lg" style={{ width: "100%" }}>
        {submitting ? (locale === "pt" ? "Enviando..." : "Sending...") : t("form.submit", locale)} {!submitting && <Icon.ArrowRight />}
      </button>
    </form>
  );
}

// ===== Mobile preview (iPhone frame in corner) =====
function MobilePreview({ show }) {
  if (!show) return null;
  const { locale } = useLocale();
  return (
    <div className="mobile-preview" aria-hidden="true">
      <div className="mobile-preview-label">{locale === "pt" ? "Preview mobile" : "Mobile preview"}</div>
      <div className="iphone-frame">
        <div className="iphone-notch" />
        <iframe src={location.href.split("#")[0] + "#/"} title="Mobile preview" className="iphone-screen" />
      </div>
    </div>
  );
}

// ===== Tweaks mount (uses TweaksPanel from chrome.jsx) =====
function TweaksMount({ globeMode, setGlobeMode }) {
  const { locale, setLocale } = useLocale();
  const [active, setActive] = useState(false);
  const [showMobile, setShowMobile] = useState(!!(window.__PONTE_TWEAKS__ || {}).showMobilePreview);

  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data;
      if (!d || typeof d !== "object") return;
      if (d.type === "__activate_edit_mode") setActive(true);
      else if (d.type === "__deactivate_edit_mode") setActive(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  if (!active) return null;

  const persist = (edits) => {
    try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*"); } catch (_) {}
  };
  const close = () => { setActive(false); window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*"); };

  return (
    <div className="tweaks-panel" role="dialog" aria-label="Tweaks">
      <div className="tweaks-header">
        <h3>Tweaks</h3>
        <button onClick={close} aria-label="Close"><Icon.Close /></button>
      </div>
      <div className="tweak-section">
        <div className="tweak-section-title">{locale === "pt" ? "Idioma" : "Locale"}</div>
        <div className="tweak-segmented">
          <button className={locale === "pt" ? "active" : ""} onClick={() => { setLocale("pt"); persist({ locale: "pt" }); }}>🇧🇷 Português</button>
          <button className={locale === "en" ? "active" : ""} onClick={() => { setLocale("en"); persist({ locale: "en" }); }}>🌐 English</button>
        </div>
      </div>
      <div className="tweak-section">
        <div className="tweak-section-title">{locale === "pt" ? "Mapa" : "Map"}</div>
        <div className="tweak-segmented">
          <button className={globeMode === "3d" ? "active" : ""} onClick={() => { setGlobeMode("3d"); persist({ globeMode: "3d" }); }}>{locale === "pt" ? "Globo 3D" : "3D Globe"}</button>
          <button className={globeMode === "2d" ? "active" : ""} onClick={() => { setGlobeMode("2d"); persist({ globeMode: "2d" }); }}>{locale === "pt" ? "Mapa 2D" : "2D Map"}</button>
        </div>
      </div>
      <div className="tweak-section">
        <div className="tweak-section-title">{locale === "pt" ? "Preview mobile" : "Mobile preview"}</div>
        <label className="tweak-toggle">
          <input type="checkbox" checked={showMobile} onChange={(e) => { setShowMobile(e.target.checked); persist({ showMobilePreview: e.target.checked }); }} />
          <span>{locale === "pt" ? "Mostrar iPhone no canto" : "Show iPhone in corner"}</span>
        </label>
        <p className="muted" style={{ fontSize: 11, margin: "8px 0 0" }}>
          {locale === "pt" ? "Recarregue para aplicar." : "Reload to apply."}
        </p>
      </div>
    </div>
  );
}

// ===== Toast host shim — global push proxy =====
let _toastPush = null;
function ToastBridge() {
  const { push } = useToast();
  useEffect(() => { _toastPush = push; window.showToast = (msg) => push(msg); return () => { _toastPush = null; }; }, [push]);
  return null;
}

// ===== Locale Splash showing both PT and EN inside the same card =====
// (uses LocaleSplash from chrome.jsx)

// ===== App =====
const { useState: _us, useEffect: _ue, useCallback: _uc } = React;

function parseHash() {
  const h = location.hash.replace(/^#/, "") || "/";
  return h.startsWith("/") ? h : "/" + h;
}

function App() {
  const tw = window.__PONTE_TWEAKS__ || {};
  let stored = null; try { stored = localStorage.getItem("ponte.locale"); } catch (_) {}
  const [locale, setLocaleState] = useState(stored || tw.locale || "pt");
  const [path, setPath] = useState(parseHash());
  const [splashOpen, setSplashOpen] = useState(!stored);
  const [globeMode, setGlobeMode] = useState(tw.globeMode || "3d");

  const setLocale = useCallback((l) => {
    setLocaleState(l);
    try { localStorage.setItem("ponte.locale", l); } catch (_) {}
    document.documentElement.lang = l === "pt" ? "pt-BR" : "en";
  }, []);

  useEffect(() => { document.documentElement.lang = locale === "pt" ? "pt-BR" : "en"; }, [locale]);

  useEffect(() => {
    const onHash = () => { setPath(parseHash()); window.scrollTo({ top: 0, left: 0, behavior: "auto" }); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = useCallback((to) => { if (to !== location.hash.replace(/^#/, "")) location.hash = to; }, []);

  const renderPage = () => {
    if (path === "/" || path === "") return <HomePage globeMode={globeMode} setGlobeMode={setGlobeMode} />;
    if (path === "/properties") return <PropertiesPage />;
    if (path.startsWith("/property/")) return <PropertyDetailPage slug={path.slice("/property/".length)} />;
    if (path === "/how-it-works") return <HowItWorksPage />;
    if (path === "/about") return <AboutPage />;
    if (path === "/list-property") return <ListPropertyPage />;
    if (path === "/signup") return <SignupPage />;
    if (path === "/login") return <LoginPage />;
    return (
      <div className="container section text-center" style={{ paddingTop: 120, paddingBottom: 120 }}>
        <h1 className="serif" style={{ fontSize: 84, letterSpacing: "-0.03em", margin: 0 }}>404</h1>
        <p className="muted" style={{ fontSize: 18, marginTop: 12 }}>{locale === "pt" ? "Página não encontrada." : "Page not found."}</p>
        <button className="btn btn-primary mt-24" onClick={() => navigate("/")}>{locale === "pt" ? "Ir para Home" : "Go home"} <Icon.ArrowRight /></button>
      </div>
    );
  };

  return (
    <LocaleContext.Provider value={{ locale, setLocale }}>
      <RouterContext.Provider value={{ path, navigate }}>
        <ToastProvider>
          <ToastBridge />
          {splashOpen && <LocaleSplash onPick={(l) => { setLocale(l); setSplashOpen(false); }} />}
          <Header />
          <main>{renderPage()}</main>
          <Footer />
          <MobilePreview show={tw.showMobilePreview} />
          <TweaksMount globeMode={globeMode} setGlobeMode={setGlobeMode} />
        </ToastProvider>
      </RouterContext.Provider>
    </LocaleContext.Provider>
  );
}

Object.assign(window, { Modal, InterestForm, MobilePreview, TweaksMount, App });

ReactDOM.createRoot(document.getElementById("root")).render(<App />);