// ========= ModoLar — App raiz =========
/* global React, ReactDOM, Header, Footer, HomeView, CategoryView, CategoryViewV2, ProductView, CartDrawer, CheckoutView, Icon */
const { useState: uS, useEffect: uE } = React;

const PHONE = "19970468030";

function LoadingScreen() {
  return (
    <div style={{minHeight:'100vh',display:'grid',placeItems:'center',background:'#FAFAF7'}}>
      <div style={{textAlign:'center'}}>
        <img src="assets/logo-laranja.png" style={{height:48,marginBottom:24,animation:'pulse 1.5s ease-in-out infinite'}}/>
        <p style={{color:'#888',fontSize:14,fontFamily:'Space Grotesk'}}>Carregando catálogo...</p>
      </div>
    </div>
  );
}

function App() {
  const [ready, setReady] = uS(false);
  const [route, setRoute] = uS(() => {
    try { return JSON.parse(localStorage.getItem('modolar_route')) || { view: 'home' }; }
    catch { return { view: 'home' }; }
  });
  const [cart, setCart] = uS(() => {
    try { return JSON.parse(localStorage.getItem('modolar_cart')) || []; }
    catch { return []; }
  });
  const [cartOpen, setCartOpen] = uS(false);
  const [coupon, setCoupon] = uS(null);
  const [tweaks, setTweaks] = uS({
    heroLayout: 'split', typography: 'geo', cardStyle: 'complete',
    orangeIntensity: 'medium', density: 'cozy'
  });
  const [tweaksOpen, setTweaksOpen] = uS(false);

  // Load data + settings from API
  uE(() => {
    Promise.all([
      fetch('/api/data').then(r => r.json()),
      fetch('/api/settings').then(r => r.json()),
    ]).then(([data, settings]) => {
      window.MODOLAR_DATA.categories = data.categories;
      window.MODOLAR_DATA.products = data.products;
      setTweaks(t => ({
        ...t,
        heroLayout: settings.hero_layout || t.heroLayout,
        typography: settings.typography || t.typography,
        cardStyle: settings.card_style || t.cardStyle,
        orangeIntensity: settings.orange_intensity || t.orangeIntensity,
        density: settings.density || t.density,
      }));
      if (settings.store_phone) window._MODOLAR_PHONE = settings.store_phone.replace(/\D/g,'');
      setReady(true);
    }).catch(() => setReady(true));
  }, []);

  uE(() => { localStorage.setItem('modolar_route', JSON.stringify(route)); window.scrollTo(0, 0); }, [route]);
  uE(() => { localStorage.setItem('modolar_cart', JSON.stringify(cart)); }, [cart]);

  uE(() => {
    const h = document.documentElement;
    h.dataset.orange = tweaks.orangeIntensity;
    h.dataset.type = tweaks.typography;
    h.dataset.density = tweaks.density;
  }, [tweaks]);

  uE(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const navigate = (r) => setRoute(r);

  const addToCart = (product) => {
    const item = {
      id: product.id, shortName: product.shortName, images: product.images, price: product.price,
      _color: product._color || product.colors[0].name,
      _size: product._size || product.defaultSize,
      _qty: product._qty || 1
    };
    setCart(prev => {
      const idx = prev.findIndex(x => x.id === item.id && x._color === item._color && x._size === item._size);
      if (idx >= 0) { const c = [...prev]; c[idx]._qty += item._qty; return c; }
      return [...prev, item];
    });
    setCartOpen(true);
  };

  const updateQty = (idx, delta) => setCart(prev => {
    const c = [...prev];
    c[idx] = { ...c[idx], _qty: Math.max(1, c[idx]._qty + delta) };
    return c;
  });
  const removeItem = (idx) => setCart(prev => prev.filter((_, i) => i !== idx));
  const clearCart = () => { setCart([]); setCoupon(null); };
  const goCheckout = () => { setCartOpen(false); setRoute({ view: 'checkout' }); };

  const updateTweak = (key, val) => {
    setTweaks(prev => {
      const next = { ...prev, [key]: val };
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
      // Persist to settings
      const keyMap = { heroLayout:'hero_layout', typography:'typography', cardStyle:'card_style', orangeIntensity:'orange_intensity', density:'density' };
      fetch('/api/settings', { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ [keyMap[key]]: val }) });
      return next;
    });
  };

  const cartCount = cart.reduce((s, it) => s + it._qty, 0);
  const activePhone = window._MODOLAR_PHONE || PHONE;

  if (!ready) return <LoadingScreen/>;

  let viewEl;
  if (route.view === 'home') viewEl = <HomeView navigate={navigate} onAdd={addToCart} heroLayout={tweaks.heroLayout} cardStyle={tweaks.cardStyle}/>;
  else if (route.view === 'category') viewEl = <CategoryViewV2 catId={route.catId} navigate={navigate} onAdd={addToCart} cardStyle={tweaks.cardStyle}/>;
  else if (route.view === 'product') viewEl = <ProductView productId={route.productId} navigate={navigate} onAdd={addToCart}/>;
  else if (route.view === 'checkout') viewEl = <CheckoutView cart={cart} phone={activePhone} navigate={navigate} clearCart={clearCart} applyCoupon={setCoupon} coupon={coupon}/>;

  return (
    <>
      <Header route={route} navigate={navigate} cartCount={cartCount} openCart={() => setCartOpen(true)}/>
      <main data-screen-label={route.view === 'home' ? '01 Home' : route.view === 'category' ? `02 Cat ${route.catId}` : `03 Produto ${route.productId}`}>
        {viewEl}
      </main>
      <Footer navigate={navigate}/>

      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} cart={cart}
        updateQty={updateQty} removeItem={removeItem} phone={activePhone} goCheckout={goCheckout}/>

      {!cartOpen && cartCount === 0 && (
        <a className="wa-fab" href={`https://wa.me/55${activePhone}`} target="_blank" rel="noopener" aria-label="WhatsApp">
          <Icon.WhatsApp size={26}/>
        </a>
      )}

      {tweaksOpen && (
        <div className="tweaks-panel open">
          <h4>
            <span><Icon.Sliders size={14}/> Tweaks</span>
            <button className="tweaks-close" onClick={() => setTweaksOpen(false)}><Icon.Close size={16}/></button>
          </h4>
          <div className="group">
            <div className="group-lbl">Hero</div>
            <div className="opts">
              {['split','fullbleed','carousel'].map(v => (
                <button key={v} className={tweaks.heroLayout === v ? 'active' : ''} onClick={() => updateTweak('heroLayout', v)}>
                  {v === 'split' ? 'Split' : v === 'fullbleed' ? 'Full-bleed' : 'Carrossel'}
                </button>
              ))}
            </div>
          </div>
          <div className="group">
            <div className="group-lbl">Tipografia</div>
            <div className="opts">
              {[['geo','Geométrica'],['serif','Serifada'],['mixed','Mista']].map(([v,l]) => (
                <button key={v} className={tweaks.typography === v ? 'active' : ''} onClick={() => updateTweak('typography', v)}>{l}</button>
              ))}
            </div>
          </div>
          <div className="group">
            <div className="group-lbl">Card do produto</div>
            <div className="opts">
              {[['minimal','Minimal'],['complete','Completo'],['bigbadge','Badge grande']].map(([v,l]) => (
                <button key={v} className={tweaks.cardStyle === v ? 'active' : ''} onClick={() => updateTweak('cardStyle', v)}>{l}</button>
              ))}
            </div>
          </div>
          <div className="group">
            <div className="group-lbl">Intensidade do laranja</div>
            <div className="opts">
              {[['soft','Suave'],['medium','Médio'],['strong','Forte']].map(([v,l]) => (
                <button key={v} className={tweaks.orangeIntensity === v ? 'active' : ''} onClick={() => updateTweak('orangeIntensity', v)}>{l}</button>
              ))}
            </div>
          </div>
          <div className="group">
            <div className="group-lbl">Densidade</div>
            <div className="opts">
              {[['cozy','Confortável'],['compact','Compacta']].map(([v,l]) => (
                <button key={v} className={tweaks.density === v ? 'active' : ''} onClick={() => updateTweak('density', v)}>{l}</button>
              ))}
            </div>
          </div>
        </div>
      )}
    </>
  );
}

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