// Lavadero Curupí — main app + Tweaks

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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "palette": "curupi"
}/*EDITMODE-END*/;

// Paletas inspiradas en el logo: navy + cyan brush
const PALETTES = {
  curupi:    { label: "Cyan Curupí",  color: "#2bb0cf", deep: "#1d8aa5", ink: "#062633" },
  navy:      { label: "Navy lockup",  color: "#111a4d", deep: "#0a1138", ink: "#f4f1e8" },
  espuma:    { label: "Espuma fresca", color: "#56cde1", deep: "#2a99b5", ink: "#04222e" },
  cromo:     { label: "Cromo brasa",  color: "#d97a3b", deep: "#a85420", ink: "#1f0d04" },
};

function App() {
  const [route, setRoute] = useStateApp({ page: 'home', params: {} });
  const [botOpen, setBotOpen] = useStateApp(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply theme + palette
  useEffectApp(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    const palette = PALETTES[tweaks.palette] || PALETTES.curupi;
    document.documentElement.style.setProperty('--accent', palette.color);
    document.documentElement.style.setProperty('--accent-deep', palette.deep);
    document.documentElement.style.setProperty('--accent-ink', palette.ink);
  }, [tweaks.theme, tweaks.palette]);

  // scroll to top on route change
  useEffectApp(() => {
    window.scrollTo({ top: 0 });
  }, [route.page]);

  const nav = (page, params = {}) => setRoute({ page, params });

  return (
    <>
      {route.page === 'home' && (
        <>
          <LCNav onNav={nav} onOpenBot={() => setBotOpen(true)} />
          <LCLanding onNav={nav} onOpenBot={() => setBotOpen(true)} />
          <LCFloatingWA onClick={() => setBotOpen(true)} />
        </>
      )}

      {route.page === 'booking' && (
        <LCBooking onBack={() => nav('home')} initial={route.params} />
      )}

      {route.page === 'admin' && (
        <LCAdmin onBack={() => nav('home')} />
      )}

      <WABot open={botOpen} onClose={() => setBotOpen(false)} />

      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks · Curupí">
      <TweakSection label="Tema">
        <TweakRadio
          label="Modo"
          value={tweaks.theme}
          options={[
            { value: 'dark', label: 'Oscuro' },
            { value: 'light', label: 'Claro' },
          ]}
          onChange={v => setTweak('theme', v)}
        />
      </TweakSection>

      <TweakSection label="Paleta de acento">
        <TweakColor
          label="Color principal"
          value={tweaks.palette}
          options={Object.keys(PALETTES).map(id => ({
            value: id,
            label: PALETTES[id].label,
            color: PALETTES[id].color,
          }))}
          onChange={v => setTweak('palette', v)}
        />
        <div style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', marginTop: 8, lineHeight: 1.5, padding: '0 14px' }}>
          {'>'} cambia los acentos en vivo, en toda la web y el panel admin.
        </div>
      </TweakSection>

      <TweakSection label="Navegación rápida">
        <TweakButton label="↑ Top de la home" onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }} />
      </TweakSection>
    </TweaksPanel>
  );
}

// TweakColor needs custom adapter since options have color
function TweakColor({ label, value, options, onChange }) {
  return (
    <div style={{ marginBottom: 12 }}>
      {label && <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 8, fontWeight: 500 }}>{label}</div>}
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {options.map(opt => {
          const selected = value === opt.value;
          return (
            <button key={opt.value} onClick={() => onChange(opt.value)} title={opt.label}
              style={{
                display: 'flex', alignItems: 'center', gap: 8,
                padding: '6px 10px 6px 6px', borderRadius: 999,
                background: selected ? 'rgba(255,255,255,0.08)' : 'transparent',
                border: '1px solid', borderColor: selected ? opt.color : 'rgba(255,255,255,0.1)',
                color: 'var(--text)', fontSize: 12, cursor: 'pointer',
                transition: 'all .15s',
              }}>
              <span style={{
                width: 18, height: 18, borderRadius: 999, background: opt.color,
                boxShadow: selected ? `0 0 0 2px ${opt.color}` : 'none',
              }} />
              {opt.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}

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