// main.jsx — app root: navigation chrome, tweaks, mount

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "bosque",
  "typeface": "moderna",
  "corners": "redondeadas",
  "texture": "on"
}/*EDITMODE-END*/;

const TAB_SCREENS = ['home', 'menu', 'esquel', 'place', 'nosotros'];

function SubHeader({ title, onBack }) {
  return (
    <div className="sub-header">
      <button onClick={onBack} className="back-btn" aria-label="Volver"><Icon name="chevL" size={20} sw={2.2} /></button>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: '#FBF6EC' }}>{title}</span>
    </div>
  );
}

function App({ tw, fullscreen }) {
  const [lang, setLang] = React.useState('es');
  const t = STR[lang];

  const [cart, setCart] = React.useState({});
  const addToCart = (id, item) => setCart(prev => {
    const cur = prev[id];
    return { ...prev, [id]: { ...item, qty: (cur?.qty || 0) + 1 } };
  });
  const removeFromCart = (id) => setCart(prev => {
    const cur = prev[id];
    if (!cur || cur.qty <= 1) { const n = { ...prev }; delete n[id]; return n; }
    return { ...prev, [id]: { ...cur, qty: cur.qty - 1 } };
  });
  const clearCart = () => setCart({});

  const [screen, setScreen] = React.useState('home');
  const histRef = React.useRef([]);
  const scrollRef = React.useRef(null);
  const go = (s) => { histRef.current.push(screen); setScreen(s); };
  const back = () => { const prev = histRef.current.pop(); setScreen(prev || 'home'); };
  React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; }, [screen]);

  const activeTab = TAB_SCREENS.includes(screen) ? screen : (screen === 'combos' ? 'menu' : screen === 'order' ? 'menu' : null);
  const tabGo = (s) => { histRef.current = []; setScreen(s); };

  const SUB_TITLES = { combos: t.combosTitle, order: t.orderTitle };
  const isSub = screen in SUB_TITLES;

  const screens = {
    home: <HomeScreen />, menu: <MenuScreen />, esquel: <EsquelScreen />,
    place: <PlaceScreen />, combos: <CombosScreen />, nosotros: <NosotrosScreen />,
    order: <OrderNoteScreen />,
  };

  return (
    <LangCtx.Provider value={{ lang, setLang, t }}>
      <CartCtx.Provider value={{ cart, addToCart, removeFromCart, clearCart }}>
      <NavCtx.Provider value={{ tab: activeTab, go, back, screen }}>
        <div className="az-app"
          data-mode={fullscreen ? 'fullscreen' : 'frame'}
          data-palette={tw.palette} data-type={tw.typeface}
          data-corners={tw.corners} data-texture={tw.texture}>
          {isSub ? <SubHeader title={SUB_TITLES[screen]} onBack={back} /> : <Header />}
          <div className="az-scroll" ref={scrollRef} key={screen}>
            {screens[screen]}
            <div style={{ height: 16 }} />
          </div>
          <div className="tabbar-wrap">
            <TabBarNav active={activeTab} go={tabGo} t={t} />
          </div>
        </div>
      </NavCtx.Provider>
      </CartCtx.Provider>
    </LangCtx.Provider>
  );
}

function TabBarNav({ active, go, t }) {
  const tabs = [
    { id: 'home', icon: 'coffee' }, { id: 'menu', icon: 'sandwich' },
    { id: 'esquel', icon: 'mountain' }, { id: 'place', icon: 'pin' },
    { id: 'nosotros', icon: 'heart' },
  ];
  const idx = tabs.findIndex(tb => tb.id === active);
  return (
    <div className="tabbar">
      {idx >= 0 && <span className="tab-pill" style={{ left: `calc(${idx} * 20% + 5px)` }} />}
      {tabs.map((tb, i) => (
        <button key={tb.id} className={active === tb.id ? 'is-on' : ''} onClick={() => go(tb.id)}>
          <Icon name={tb.icon} size={22} sw={active === tb.id ? 2.1 : 1.7} />
          <span className="tab-lbl">{t.tabs[i]}</span>
        </button>
      ))}
    </div>
  );
}

function Root() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const tweaks = (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Identidad visual" />
      <TweakRadio label="Paleta" value={tw.palette}
        options={[{ value: 'bosque', label: 'Bosque' }, { value: 'lago', label: 'Lago' }, { value: 'ruta', label: 'Ruta' }]}
        onChange={v => setTweak('palette', v)} />
      <TweakRadio label="Titulares" value={tw.typeface}
        options={[{ value: 'moderna', label: 'Moderna' }, { value: 'artesanal', label: 'Artesanal' }]}
        onChange={v => setTweak('typeface', v)} />
      <TweakSection label="Forma" />
      <TweakRadio label="Esquinas" value={tw.corners}
        options={[{ value: 'redondeadas', label: 'Redond.' }, { value: 'suaves', label: 'Suaves' }, { value: 'rectas', label: 'Rectas' }]}
        onChange={v => setTweak('corners', v)} />
      <TweakToggle label="Textura papel" value={tw.texture === 'on'}
        onChange={v => setTweak('texture', v ? 'on' : 'off')} />
    </TweaksPanel>
  );

  return (
    <div className="fullscreen-app">
      <App tw={tw} fullscreen />
      {tweaks}
    </div>
  );
}

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