// main.jsx — app root: state, 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'];

// Back bar for sub-screens
function SubHeader({ title, onBack }) {
  return (
    <div style={{ position: 'relative', zIndex: 2, background: 'var(--c-surface-2)', borderBottom: '1px solid var(--c-line)', padding: 'var(--top-pad) 14px 12px', display: 'flex', alignItems: 'center', gap: 8 }}>
      <button onClick={onBack} style={{ width: 38, height: 38, borderRadius: 999, border: '1px solid var(--c-line)', background: 'var(--c-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--c-ink)' }} aria-label="Volver">
        <Icon name="chevL" size={20} sw={2.2} />
      </button>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18 }}>{title}</span>
    </div>
  );
}

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

  // cart: ordered map
  const [items, setItems] = React.useState({});
  const [order, setOrder] = React.useState([]);
  const add = (id) => {
    setItems(m => ({ ...m, [id]: (m[id] || 0) + 1 }));
    setOrder(o => o.includes(id) ? o : [...o, id]);
  };
  const remove = (id) => {
    setItems(m => {
      const q = (m[id] || 0) - 1;
      const n = { ...m };
      if (q <= 0) { delete n[id]; setOrder(o => o.filter(x => x !== id)); } else n[id] = q;
      return n;
    });
  };
  const clear = () => { setItems({}); setOrder([]); };
  const cart = {
    qty: (id) => items[id] || 0,
    add, remove, clear,
    lines: order.map(id => ({ id, qty: items[id] })),
    count: Object.values(items).reduce((a, b) => a + b, 0),
    total: order.reduce((s, id) => s + (productById(id)?.price || 0) * items[id], 0),
  };

  // navigation
  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' : null);
  const tabGo = (s) => { histRef.current = []; setScreen(s); };

  const SUB_TITLES = { combos: t.combosTitle, cart: t.cart };
  const isSub = screen in SUB_TITLES;
  const showTabs = screen !== 'confirm';
  const showCartBar = !['cart', 'confirm'].includes(screen);

  const screens = {
    home: <HomeScreen />, menu: <MenuScreen />, esquel: <EsquelScreen />,
    place: <PlaceScreen />, combos: <CombosScreen />, cart: <CartScreen />, confirm: <ConfirmScreen />,
  };

  return (
    <LangCtx.Provider value={{ lang, setLang, t }}>
      <CartCtx.Provider value={cart}>
        <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} />
              : screen === 'confirm' ? null : <Header />}
            <div className="az-scroll" ref={scrollRef}>
              {screens[screen]}
              <div style={{ height: showCartBar && cart.count ? 96 : 18 }} />
            </div>
            {showCartBar && <CartBar />}
            {showTabs && (
              <div className="tabbar-wrap">
                <TabBarNav active={activeTab} go={tabGo} t={t} />
              </div>
            )}
          </div>
        </NavCtx.Provider>
      </CartCtx.Provider>
    </LangCtx.Provider>
  );
}

// Tab bar that takes explicit props (resets history)
function TabBarNav({ active, go, t }) {
  const tabs = [
    { id: 'home', icon: 'coffee' }, { id: 'menu', icon: 'sandwich' },
    { id: 'esquel', icon: 'mountain' }, { id: 'place', icon: 'pin' },
  ];
  return (
    <div className="tabbar">
      {tabs.map((tb, i) => (
        <button key={tb.id} className={active === tb.id ? 'is-on' : ''} onClick={() => go(tb.id)}>
          <Icon name={tb.icon} size={23} sw={active === tb.id ? 2.1 : 1.7} />
          <span className="tab-lbl">{t.tabs[i]}</span>
        </button>
      ))}
    </div>
  );
}

// Reactive media query
function useMediaQuery(query) {
  const get = () => (typeof window !== 'undefined' && window.matchMedia ? window.matchMedia(query).matches : false);
  const [match, setMatch] = React.useState(get);
  React.useEffect(() => {
    const m = window.matchMedia(query);
    const fn = () => setMatch(m.matches);
    fn();
    m.addEventListener ? m.addEventListener('change', fn) : m.addListener(fn);
    return () => { m.removeEventListener ? m.removeEventListener('change', fn) : m.removeListener(fn); };
  }, [query]);
  return match;
}

function Root() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // On real phones / tablet-portrait the app fills the screen like a native web app.
  // The phone bezel only appears on larger (desktop) screens for previewing.
  const isMobile = useMediaQuery('(max-width: 760px)');

  const tweaks = (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Identidad visual" />
      <TweakRadio label="Paleta" value={tw.palette}
        options={[{ value: 'bosque', label: 'Bosque' }, { value: 'ruta', label: 'Ruta' }, { value: 'lago', label: 'Lago' }]}
        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>
  );

  // ── Fullscreen mobile: app fills the viewport ───────────────
  if (isMobile) {
    return (
      <div className="fullscreen-app">
        <App tw={tw} fullscreen />
        {tweaks}
      </div>
    );
  }

  // ── Desktop: phone bezel inside a stage ─────────────────────
  return (
    <div className="stage">
      <div className="stage-aside">
        <div className="mark">Prototipo · Mobile-first</div>
        <h1>Cafetería La Z</h1>
        <p>Tu parada en Esquel antes de seguir viaje. Café, pastelería casera y combos para llevar — a pasos de tu plataforma.</p>
        <p>La app conecta lo que querés hacer en Esquel con lo que podés llevarte para el camino.</p>
        <div className="hint">
          En un celular se ve a pantalla completa, como una app. Acá mostramos el marco solo para previsualizar.<br /><br />
          Probá los <strong style={{ color: '#C99A4E' }}>Tweaks</strong> (arriba) para explorar paletas, tipografía y estilo.
        </div>
      </div>

      <div className="phone-wrap">
        <IOSDevice width={390} height={844}>
          <App tw={tw} />
        </IOSDevice>
      </div>

      {tweaks}
    </div>
  );
}

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