// app.jsx — Root del sitio MiPC y su Mundo
// Maneja routing por hash, carrito persistente y tweaks en vivo.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#E30613",
  "accent": "#1E40AF",
  "dark": false,
  "showBanners": true,
  "homeVariant": "A",
  "density": 4,
  "fontFamily": "Inter"
}/*EDITMODE-END*/;

// ── Helpers de routing por hash ──────────────────────────────────────
function parseHash() {
  const h = (window.location.hash || '#/').replace(/^#/, '');
  const [pathRaw, queryRaw=''] = h.split('?');
  const path = pathRaw || '/';
  const query = Object.fromEntries(new URLSearchParams(queryRaw));
  return { path, query };
}

function useRoute() {
  const [r, setR] = React.useState(parseHash());
  React.useEffect(() => {
    const onHash = () => setR(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return r;
}

function navigate(path, q) {
  let h = '#' + path;
  if (q) h += '?' + new URLSearchParams(q).toString();
  window.location.hash = h.slice(1); // setting hash triggers hashchange
  window.scrollTo({ top: 0, behavior: 'instant' });
}

// ── Carrito persistente ─────────────────────────────────────────────
function useCart() {
  const [cart, setCart] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('mipc-cart') || '[]'); }
    catch (e) { return []; }
  });
  React.useEffect(() => {
    try { localStorage.setItem('mipc-cart', JSON.stringify(cart)); } catch (e) {}
  }, [cart]);

  const addToCart = (p, qty = 1) => {
    setCart(c => {
      const ix = c.findIndex(it => it.p.id === p.id);
      if (ix >= 0) {
        const next = [...c];
        next[ix] = { ...next[ix], qty: Math.min((next[ix].qty || 0) + qty, p.stock || 99) };
        return next;
      }
      return [...c, { p, qty }];
    });
    // Toast simple
    showToast(`✓ ${p.nombre.slice(0,42)}${p.nombre.length>42?'…':''} agregado al carrito`);
  };
  const setQty = (id, qty) => {
    setCart(c => qty <= 0
      ? c.filter(it => it.p.id !== id)
      : c.map(it => it.p.id === id ? { ...it, qty } : it));
  };
  const removeItem = (id) => setCart(c => c.filter(it => it.p.id !== id));
  const clearCart = () => setCart([]);
  return { cart, addToCart, setQty, removeItem, clearCart };
}

// Toast accesible y autoremovible
function showToast(msg) {
  let el = document.getElementById('mipc-toast');
  if (!el) {
    el = document.createElement('div');
    el.id = 'mipc-toast';
    el.className = 'toast';
    document.body.appendChild(el);
  }
  el.textContent = msg;
  el.classList.add('show');
  clearTimeout(el._t);
  el._t = setTimeout(() => el.classList.remove('show'), 2400);
}

// ── App ──────────────────────────────────────────────────────────────
function App() {
  const route = useRoute();
  const { cart, addToCart, setQty, removeItem, clearCart } = useCart();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [query, setQuery] = React.useState(route.query.q || '');

  // Aplicar tweaks al :root como CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--brand-primary', t.primary);
    root.style.setProperty('--brand-accent', t.accent);
    root.dataset.theme = t.dark ? 'dark' : 'light';
    root.style.setProperty('--font-family',
      t.fontFamily === 'Manrope' ? "'Manrope', system-ui, sans-serif" :
      t.fontFamily === 'DM Sans' ? "'DM Sans', system-ui, sans-serif" :
      t.fontFamily === 'Plus Jakarta' ? "'Plus Jakarta Sans', system-ui, sans-serif" :
      "'Inter', system-ui, sans-serif"
    );
  }, [t.primary, t.accent, t.dark, t.fontFamily]);

  const onNavigate = (p) => navigate(p);
  const onSearch = (q) => {
    if (!q?.trim()) return;
    navigate('/buscar', { q });
  };

  React.useEffect(() => {
    setQuery(route.query.q || '');
  }, [route.query.q]);

  const cartCount = cart.reduce((s, it) => s + it.qty, 0);

  // Routing
  let page;
  if (route.path === '/' || route.path === '') {
    page = <HomePage onNavigate={onNavigate} addToCart={addToCart}
                      variant={t.homeVariant} showBanners={t.showBanners}/>;
  } else if (route.path.startsWith('/categoria/')) {
    const cat = route.path.split('/')[2];
    page = <CategoryPage cat={cat} onNavigate={onNavigate} addToCart={addToCart} density={t.density}/>;
  } else if (route.path.startsWith('/producto/')) {
    const id = route.path.split('/')[2];
    page = <ProductPage id={id} onNavigate={onNavigate} addToCart={addToCart}/>;
  } else if (route.path === '/carrito') {
    page = <CartPage cart={cart} setQty={setQty} removeItem={removeItem} onNavigate={onNavigate}/>;
  } else if (route.path === '/checkout') {
    page = <CheckoutPage cart={cart} onNavigate={onNavigate} clearCart={clearCart}/>;
  } else if (route.path === '/login') {
    page = <LoginPage onNavigate={onNavigate}/>;
  } else if (route.path === '/buscar') {
    page = <SearchPage q={route.query.q || ''} onNavigate={onNavigate} addToCart={addToCart} density={t.density}/>;
  } else {
    page = <div className="container" style={{padding:'40px 0'}}>
      <h1>Página no encontrada</h1>
      <button className="btn btn-primary" onClick={()=>onNavigate('/')}>Volver al inicio</button>
    </div>;
  }

  return (
    <>
      <Header
        route={route.path}
        cartCount={cartCount}
        onNavigate={onNavigate}
        onSearch={onSearch}
        query={query}
        setQuery={setQuery}
        showBanners={t.showBanners}
      />
      <main>{page}</main>
      <Footer/>

      <TweaksPanel title="Tweaks de la tienda">
        <TweakSection label="Marca"/>
        <TweakColor label="Color principal" value={t.primary}
          options={['#E30613','#DC2626','#1E40AF','#0F172A','#7C3AED','#059669','#EA580C']}
          onChange={(v)=>setTweak('primary', v)}/>
        <TweakColor label="Color secundario" value={t.accent}
          options={['#1E40AF','#0EA5E9','#0F172A','#F59E0B','#22C55E','#E11D48']}
          onChange={(v)=>setTweak('accent', v)}/>
        <TweakSelect label="Tipografía" value={t.fontFamily}
          options={['Inter','Manrope','DM Sans','Plus Jakarta']}
          onChange={(v)=>setTweak('fontFamily', v)}/>

        <TweakSection label="Layout"/>
        <TweakRadio label="Variante home" value={t.homeVariant} options={['A','B']}
          onChange={(v)=>setTweak('homeVariant', v)}/>
        <TweakSlider label="Columnas grid" value={t.density} min={3} max={6} step={1}
          onChange={(v)=>setTweak('density', v)}/>
        <TweakToggle label="Mostrar banners de oferta" value={t.showBanners}
          onChange={(v)=>setTweak('showBanners', v)}/>
        <TweakToggle label="Modo oscuro" value={t.dark}
          onChange={(v)=>setTweak('dark', v)}/>

        <TweakSection label="Inventario"/>
        <TweakButton label="🔌 Conectar a /mecatronilab/mipc/inventario"
          onClick={()=>{
            const url = prompt('URL del inventario (JSON):', '/mecatronilab/mipc/inventario');
            if (url) window.MiPCInventario.cargar(url).then(r => {
              if (r) showToast(`Cargados ${r.length} productos`); else showToast('No se pudo cargar el inventario');
            });
          }}/>
      </TweaksPanel>
    </>
  );
}

// Re-render cuando el inventario remoto cambie
window.addEventListener('inventario-actualizado', () => {
  // Forzar refresh leve disparando hashchange
  window.dispatchEvent(new HashChangeEvent('hashchange'));
});

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