// Main app for GR Gestión Inmobiliaria

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "logoVariant": "full",
  "heroStyle": "image",
  "cardStyle": "rounded",
  "accentColor": "#E63027"
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useState({ name: "home", params: {} });
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [showTweaks, setShowTweaks] = useState(false);

  useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === "__activate_edit_mode") setShowTweaks(true);
      else if (e.data?.type === "__deactivate_edit_mode") setShowTweaks(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  // Apply accent color to CSS var
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accentColor);
  }, [t.accentColor]);

  // Scroll to top on route change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route.name, route.params?.id]);

  const navigate = (name, params = {}) => setRoute({ name, params });
  const openProperty = (p) => navigate("detail", { id: p.id });

  let view = null;
  if (route.name === "home") view = <HomePage onNavigate={navigate} onOpenProperty={openProperty} tweaks={t} />;
  else if (route.name === "listing") view = <ListingPage onOpenProperty={openProperty} initialFilters={route.params.initialFilters} tweaks={t} />;
  else if (route.name === "detail") {
    const prop = window.GR_DATA.PROPERTIES.find(p => p.id === route.params.id);
    view = <DetailPage property={prop} onBack={() => navigate("listing")} onOpenProperty={openProperty} />;
  }
  else if (route.name === "about") view = <AboutPage onNavigate={navigate} />;
  else if (route.name === "publish") view = <PublishPage onNavigate={navigate} />;
  else if (route.name === "contact") view = <ContactPage onNavigate={navigate} />;

  return (
    <div data-route={route.name}>
      <Header route={route.name} onNavigate={navigate} logoVariant={t.logoVariant} />
      {view}
      <Footer onNavigate={navigate} />
      <FloatingWA />

      <TweaksPanel open={showTweaks} onClose={() => setShowTweaks(false)} title="Tweaks">
        <TweakSection title="Logo">
          <TweakRadio label="Variante del logo en header" value={t.logoVariant} onChange={(v) => setTweak("logoVariant", v)} options={[
            {value: "full", label: "Full"},
            {value: "icon", label: "Icono"},
            {value: "badge", label: "Compuesto"},
          ]} />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio label="Estilo del hero" value={t.heroStyle} onChange={(v) => setTweak("heroStyle", v)} options={[
            {value: "image", label: "Imagen full"},
            {value: "split", label: "Split"},
            {value: "dark", label: "Oscuro"},
          ]} />
        </TweakSection>
        <TweakSection title="Cards">
          <TweakRadio label="Estilo de tarjeta" value={t.cardStyle} onChange={(v) => setTweak("cardStyle", v)} options={[
            {value: "rounded", label: "Redondeada"},
            {value: "sharp", label: "Recta"},
            {value: "overlay", label: "Overlay"},
          ]} />
        </TweakSection>
        <TweakSection title="Color">
          <TweakColor label="Color de acento" value={t.accentColor} onChange={(v) => setTweak("accentColor", v)} options={[
            "#E63027", "#C8202A", "#1A1A1A", "#0F4C81",
          ]} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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