/* FEDUCCE Catálogo — shell: rutas + tweaks */
const ZDS = window.FEDUCCEDesignSystem_349cd6;
const { CHeader, CFooter, WAFloat } = window.FEDCAT_UI;
const { Home: CatHome, Catalogo, Pieza } = window.CAT_SCREENS;
const { Casa, Contacto } = window.CAT_PAGES;

const CAT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#0E5C3E", "#073B28", "#4FBE8E"],
  "pageBg": "#F0EEE7",
  "heroLayout": "Split",
  "showPrices": true,
  "cornerFrame": true,
  "waFloat": true
}/*EDITMODE-END*/;

function applyCatAccent(root, accent) {
  const a = Array.isArray(accent) ? accent : ["#0E5C3E", "#073B28", "#4FBE8E"];
  root["--emerald-600"] = a[0];
  root["--emerald-700"] = a[1];
  root["--emerald-500"] = a[0];
  root["--emerald-300"] = a[2];
  return root;
}

function CatalogApp() {
  const [t, setTweak] = useTweaks(CAT_TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState({ name: "home", params: {} });
  const go = (name, params = {}) => { setRoute({ name, params }); window.scrollTo(0, 0); };
  const styleVars = applyCatAccent({ "--surface-page": t.pageBg, "--bone-100": t.pageBg }, t.accent);

  let view;
  switch (route.name) {
    case "catalogo": view = <Catalogo go={go} t={t} />; break;
    case "product": view = <Pieza p={window.CAT_byId(route.params.id)} go={go} />; break;
    case "about": view = <Casa go={go} />; break;
    case "contacto": view = <Contacto go={go} />; break;
    default: view = <CatHome go={go} t={t} />;
  }

  return (
    <div style={{ ...styleVars, background: "var(--surface-page)", minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <CHeader route={route.name} go={go} />
      <main style={{ flex: 1 }}>{view}</main>
      <CFooter go={go} />
      {t.waFloat !== false && <WAFloat />}

      <TweaksPanel>
        <TweakSection label="Inicio" />
        <TweakRadio label="Hero" value={t.heroLayout} options={["Split", "Editorial"]} onChange={(v) => setTweak("heroLayout", v)} />
        <TweakToggle label="Etiquetas de marco" value={t.cornerFrame} onChange={(v) => setTweak("cornerFrame", v)} />
        <TweakSection label="Catálogo" />
        <TweakToggle label="Mostrar precios" value={t.showPrices} onChange={(v) => setTweak("showPrices", v)} />
        <TweakToggle label="Burbuja de WhatsApp" value={t.waFloat} onChange={(v) => setTweak("waFloat", v)} />
        <TweakSection label="Paleta" />
        <TweakColor label="Acento" value={t.accent}
          options={[["#0E5C3E", "#073B28", "#4FBE8E"], ["#0A4E36", "#073B28", "#4FBE8E"], ["#B5893C", "#8A6526", "#E4D2A6"], ["#0C0C0B", "#0C0C0B", "#9C9A92"]]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakColor label="Papel" value={t.pageBg}
          options={["#F0EEE7", "#F6F4EE", "#EDEBE4", "#EAE7DC"]}
          onChange={(v) => setTweak("pageBg", v)} />
      </TweaksPanel>
    </div>
  );
}

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