/* app.jsx — Root, routing, idioma, temas y Tweaks */
const { useState: useStateApp, useEffect: useEffectApp } = React;

/* Theme presets — only [brand, brand-500, brand-tint]; 600 & line derive in CSS */
const THEMES = {
  azul:    ["#2C73DB", "#3D8EF3", "#e9f1fd"],
  indigo:  ["#4a3aa6", "#6f5ad1", "#efeafa"],
  cian:    ["#0a7ea0", "#15a8cf", "#e2f5fb"],
  verde:   ["#1f5e44", "#2f8a63", "#e6f2ec"],
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": ["#2C73DB", "#3D8EF3", "#e9f1fd"],
  "cardStyle": "default",
  "radius": 18,
  "texture": true
}/*EDITMODE-END*/;

// Parse a URL pathname into a route object
function pathToRoute(pathname) {
  const p = pathname.replace(/\/$/, "") || "/";
  if (p === "/" || p === "") return { name: "list" };
  if (p === "/sobre" || p === "/about") return { name: "about" };
  if (p === "/ministerio" || p === "/ministry") return { name: "ministry" };
  if (p === "/postular" || p === "/apply") return { name: "apply" };
  const applyMatch = p.match(/^\/(postular|apply)\/(.+)$/);
  if (applyMatch) return { name: "apply", id: applyMatch[2] };
  const detailMatch = p.match(/^\/(oportunidad|opportunity)\/(.+)$/);
  if (detailMatch) return { name: "detail", id: detailMatch[2] };
  return { name: "list" };
}

// Serialize a route object to a URL pathname
function routeToPath(r) {
  if (r.name === "list") return "/";
  if (r.name === "about") return "/sobre";
  if (r.name === "ministry") return "/ministerio";
  if (r.name === "apply") return r.id ? `/postular/${r.id}` : "/postular";
  if (r.name === "detail") return `/oportunidad/${r.id}`;
  return "/";
}

function App() {
  const data = window.PORTAL_DATA;
  const strings = data.strings;

  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // language (persisted)
  const [lang, setLangState] = useStateApp(() => localStorage.getItem("portal_lang") || "es");
  const setLang = (l) => { setLangState(l); localStorage.setItem("portal_lang", l); };

  // route — initialized from current URL
  const [route, setRoute] = useStateApp(() => pathToRoute(window.location.pathname));

  // Sync browser back/forward buttons
  useEffectApp(() => {
    const onPop = () => setRoute(pathToRoute(window.location.pathname));
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const go = (r) => {
    const path = routeToPath(r);
    window.history.pushState(null, "", path);
    setRoute(r);
    if (r.scroll === "grid") {
      setTimeout(() => {
        const el = document.getElementById("grid-anchor");
        if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
      }, 60);
    } else {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };

  // apply theme vars
  useEffectApp(() => {
    const root = document.getElementById("theme-root");
    if (!root) return;
    const [b, b5, tint] = t.theme || THEMES.azul;
    root.style.setProperty("--brand", b);
    root.style.setProperty("--brand-500", b5);
    root.style.setProperty("--brand-tint", tint);
    root.style.setProperty("--card-radius", (t.radius || 18) + "px");
  }, [t.theme, t.radius]);

  const detailOp = route.name === "detail" ? data.opportunities.find(o => o.id === route.id) : null;

  return (
    <div id="theme-root" className={cx("app-bg", !t.texture && "no-texture")}>
      <Header route={route} go={go} lang={lang} setLang={setLang} strings={strings} />

      {route.name === "list" && <ListView lang={lang} strings={strings} go={go} data={data} cardStyle={t.cardStyle} />}
      {route.name === "detail" && detailOp && <DetailView op={detailOp} lang={lang} strings={strings} go={go} data={data} />}
      {route.name === "apply" && <ApplyView preselectId={route.id} lang={lang} strings={strings} go={go} data={data} />}
      {route.name === "about" && <AboutView lang={lang} strings={strings} go={go} data={data} />}
      {route.name === "ministry" && <MinisterioView lang={lang} strings={strings} go={go} data={data} />}

      <Footer lang={lang} setLang={setLang} strings={strings} go={go} />

      <TweaksPanel>
        <TweakSection label={lang === "pt" ? "Tema" : "Tema"} />
        <TweakColor
          label={lang === "pt" ? "Paleta" : "Paleta"}
          value={t.theme}
          options={[THEMES.azul, THEMES.indigo, THEMES.cian, THEMES.verde]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakSection label={lang === "pt" ? "Cartões" : "Tarjetas"} />
        <TweakRadio
          label={lang === "pt" ? "Estilo" : "Estilo"}
          value={t.cardStyle}
          options={["default", "uniform"]}
          onChange={(v) => setTweak("cardStyle", v)}
        />
        <TweakSlider
          label={lang === "pt" ? "Esquinas" : "Esquinas"}
          value={t.radius} min={6} max={26} step={1} unit="px"
          onChange={(v) => setTweak("radius", v)}
        />
        <TweakToggle
          label={lang === "pt" ? "Textura de fondo" : "Textura de fondo"}
          value={t.texture}
          onChange={(v) => setTweak("texture", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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