// app.jsx — Esquelet de l'app: navegació entre pantalles, barra de pestanyes,
// càrrega del catàleg (API o fallback) i muntatge dins del CartProvider.

const { useState, useEffect, useRef } = React;

const SCREENS = {
  home: ScreenHome, daily: ScreenDaily, categories: ScreenCategories,
  category: ScreenCategory, bundles: ScreenBundles, product: ScreenProduct,
  cart: ScreenCart, checkout: ScreenCheckout, confirmed: ScreenConfirmed, tracking: ScreenTracking,
};
const DARK = { confirmed: true };            // barra d'estat blanca només a la pantalla cian
const TAB_SCREENS = ['home', 'categories', 'bundles'];
const KC = { cyan: '#009FE3', ink: '#14181B', muted: '#8A98A0', line: '#E6ECEF' };

// ── Barra de pestanyes inferior (només pantalles de navegació) ────────
function TabBar({ active, onNav, cartCount = 0 }) {
  const items = [
    ['home', t('navHome'), 'M3 11l9-7 9 7M5 10v10h14V10'],
    ['categories', t('categories'), 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z'],
    ['bundles', t('lots'), 'M3 8l9-4 9 4-9 4zM3 8v8l9 4 9-4V8'],
    ['cart', t('cart'), 'M3 4h2l2.4 12.2a1.5 1.5 0 001.5 1.2h8.5a1.5 1.5 0 001.5-1.2L21 8H6'],
  ];
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 84, zIndex: 20,
      background: 'rgba(255,255,255,0.86)', backdropFilter: 'blur(18px) saturate(180%)',
      WebkitBackdropFilter: 'blur(18px) saturate(180%)', borderTop: `1px solid ${KC.line}`,
      display: 'flex', padding: '10px 12px 0', justifyContent: 'space-around',
    }}>
      {items.map(([id, label, d]) => {
        const on = id === active;
        return (
          <div key={id} className="tap" onClick={() => onNav(id)} style={{
            position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
            cursor: 'pointer', flex: 1, color: on ? K.cyan : KC.muted,
          }}>
            <svg width="25" height="25" viewBox="0 0 24 24" fill="none">
              <path d={d} stroke="currentColor" strokeWidth={on ? 2.2 : 1.9} strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            {id === 'cart' && cartCount > 0 && (
              <div style={{ position: 'absolute', top: -4, right: 'calc(50% - 20px)', minWidth: 18, height: 18, padding: '0 5px', borderRadius: 9, background: K.cyan, color: '#fff', fontSize: 10.5, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid #fff' }}>{cartCount}</div>
            )}
            <span style={{ fontSize: 10.5, fontWeight: on ? 800 : 600 }}>{label}</span>
          </div>
        );
      })}
    </div>
  );
}

function App() {
  const cart = useCart();
  const [stack, setStack] = useState(() => {
    try { const s = JSON.parse(localStorage.getItem('ke_stack3')); if (Array.isArray(s) && s.length) return s; } catch (e) {}
    return [{ s: 'home' }];
  });
  const [dir, setDir] = useState('fwd');
  useEffect(() => { localStorage.setItem('ke_stack3', JSON.stringify(stack)); }, [stack]);

  const top = stack[stack.length - 1];
  const screen = top.s;
  const go = (name, params) => { if (!SCREENS[name]) return; setDir('fwd'); setStack((s) => [...s, { s: name, p: params || {} }]); };
  const back = () => { setDir('back'); setStack((s) => s.length > 1 ? s.slice(0, -1) : [{ s: 'home' }]); };
  const tab = (name) => {
    setDir('fwd');
    // La cistella no té barra de pestanyes: deixa 'home' a sota perquè el botó enrere funcioni.
    setStack(name === 'cart' ? [{ s: 'home' }, { s: 'cart' }] : [{ s: name }]);
  };

  const showTab = TAB_SCREENS.includes(screen);
  const Cmp = SCREENS[screen];
  const nav = { go, back, tab: showTab };

  return (
    <IOSDevice dark={!!DARK[screen]}>
      <div key={stack.length + ':' + screen} className={dir === 'fwd' ? 'slide-fwd' : 'slide-back'} style={{ height: '100%' }}>
        <Cmp nav={nav} params={top.p || {}} />
      </div>
      {showTab && <TabBar active={screen} onNav={tab} cartCount={cart.count} />}
    </IOSDevice>
  );
}

// ── Ajusta el dispositiu a la finestra ────────────────────────────────
function fit() {
  const pad = 40, W = 402, H = 874;
  const el = document.getElementById('scaler');
  if (!el) return;
  const s = Math.min((window.innerWidth - pad) / W, (window.innerHeight - pad) / H, 1.05);
  el.style.transform = 'scale(' + s + ')';
}
window.addEventListener('resize', fit);

// ── Arrencada: carrega el catàleg i munta l'app ───────────────────────
(async function boot() {
  const status = document.getElementById('__ke_status');
  try {
    const { source, store, catalog, daily, featured, bundles } = await window.KEApi.loadCatalog();
    window.CATALOG = catalog;
    window.STORE = store || {};
    if (window.applyBrand) window.applyBrand((store && store.brand) || {});
    window.DAILY = daily || null;
    window.FEATURED = featured || [];
    window.BUNDLES = bundles || [];
    window.CAT_BY_ID = {};
    window.PROD_BY_ID = {};
    catalog.forEach((c) => {
      window.CAT_BY_ID[c.id] = c;
      c.products.forEach((p) => { window.PROD_BY_ID[p.id] = { ...p, catId: c.id, catName: c.n }; });
    });
    // Els lots també han de ser accessibles per id (pantalla de producte / carret).
    (window.BUNDLES || []).forEach((b) => { window.PROD_BY_ID[b.id] = b; });
    if (status) status.textContent = source === 'api' ? 'Catàleg del backend' : 'Mode demo (catàleg local)';
    ReactDOM.createRoot(document.getElementById('root')).render(
      <CartProvider><App /></CartProvider>
    );
    fit();
    if (status) setTimeout(() => { status.style.opacity = '0'; }, 1800);
  } catch (e) {
    if (status) status.textContent = 'Error carregant el catàleg: ' + e.message;
    console.error(e);
  }
})();