// =====================================================
// Tweaks app · panel para configurar el sitio en vivo
// =====================================================

const SITE_DEFAULTS = /*EDITMODE-BEGIN*/{
  "wsp_number": "56912345678",
  "name_full": "María Paz Vásquez",
  "name_short": "María Paz",
  "tagline": "Suele responder en menos de 1h",
  "instagram": "https://instagram.com/nutricionistapaz",
  "primary_color": "#b85c3c",
  "accent_color": "#d4af37",
  "show_tienda": true,
  "show_blog": true,
  "hero_style": "editorial"
}/*EDITMODE-END*/;

function ConfigApp() {
  const [t, setTweak] = useTweaks(SITE_DEFAULTS);

  // Apply config to live page
  React.useEffect(() => {
    // Color
    document.documentElement.style.setProperty("--terracota", t.primary_color);
    document.documentElement.style.setProperty("--gold", t.accent_color);

    // Replace global config object so wsp-chat & planner pick it up on next nav
    if (window.SITE_CONFIG) {
      window.SITE_CONFIG.wsp_number = t.wsp_number;
      window.SITE_CONFIG.name_full = t.name_full;
      window.SITE_CONFIG.name_short = t.name_short;
    }

    // Live update brand name + chat header
    document.querySelectorAll(".brand-name b").forEach(e => e.textContent = t.name_full);
    document.querySelectorAll(".wsp-head .info b").forEach(e => e.textContent = t.name_short + " V.");
    document.querySelectorAll(".wsp-fab .label b").forEach(e => e.textContent = "Conversa con " + t.name_short);
    document.querySelectorAll(".wsp-head .info span").forEach(e => e.textContent = t.tagline);

    // Toggle sections
    const tienda = document.getElementById("tienda");
    if (tienda) tienda.style.display = t.show_tienda ? "" : "none";
    const blog = document.getElementById("blog");
    if (blog) blog.style.display = t.show_blog ? "" : "none";
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Contacto"></TweakSection>
      <TweakText label="WhatsApp" value={t.wsp_number}
        placeholder="56912345678"
        onChange={v => setTweak("wsp_number", v.replace(/[^\d]/g, ""))} />
      <TweakText label="Nombre" value={t.name_full}
        onChange={v => setTweak("name_full", v)} />
      <TweakText label="Nombre corto" value={t.name_short}
        onChange={v => setTweak("name_short", v)} />
      <TweakText label="Frase chat" value={t.tagline}
        onChange={v => setTweak("tagline", v)} />

      <TweakSection label="Identidad visual"></TweakSection>
      <TweakColor label="Acento principal" value={t.primary_color}
        options={["#b85c3c", "#7a5cb8", "#3c8a7a", "#c97a3c", "#1a1a1a"]}
        onChange={v => setTweak("primary_color", v)} />
      <TweakColor label="Detalle dorado" value={t.accent_color}
        options={["#d4af37", "#a8916a", "#c4a472", "#9b8246"]}
        onChange={v => setTweak("accent_color", v)} />

      <TweakSection label="Secciones visibles"></TweakSection>
      <TweakToggle label="Mostrar Blog" value={t.show_blog}
        onChange={v => setTweak("show_blog", v)} />
      <TweakToggle label="Mostrar Tienda" value={t.show_tienda}
        onChange={v => setTweak("show_tienda", v)} />

      <TweakSection label="Para guardar"></TweakSection>
      <div style={{padding:"8px 12px", fontSize:"11px", color:"rgba(255,255,255,.6)", lineHeight:1.5}}>
        Tus cambios se aplican <b style={{color:"#fff"}}>en vivo</b> y se guardan automáticamente en el archivo de configuración del sitio.
      </div>
    </TweaksPanel>
  );
}

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