// ===== Main App =====
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#fdb827",
  "density": "comfortable",
  "showTalachaBanner": true
}/*EDITMODE-END*/;

const ACCENT_PALETTE = ['#fdb827', '#ff5a5a', '#6ab7ff', '#7dd87d', '#ff8a00'];

const App = () => {
  // Route state
  const [route, setRoute] = useStateApp('home');
  const [routeParams, setRouteParams] = useStateApp({});

  // Cart + favs + auth (persisted)
  const [cart, setCart] = useStateApp(() => {
    try { return JSON.parse(localStorage.getItem('ruta-cart') || '[]'); } catch { return []; }
  });
  const [favs, setFavs] = useStateApp(() => {
    try { return JSON.parse(localStorage.getItem('ruta-favs') || '[]'); } catch { return []; }
  });
  const [user, setUser] = useStateApp(() => {
    try { return JSON.parse(localStorage.getItem('ruta-user') || 'null'); } catch { return null; }
  });

  useEffectApp(() => {
    localStorage.setItem('ruta-cart', JSON.stringify(cart));
  }, [cart]);
  useEffectApp(() => {
    localStorage.setItem('ruta-favs', JSON.stringify(favs));
  }, [favs]);
  useEffectApp(() => {
    localStorage.setItem('ruta-user', JSON.stringify(user));
  }, [user]);

  const login = (u) => { setUser(u); setRoute('account'); window.scrollTo({ top: 0, behavior: 'instant' }); };
  const logout = () => { setUser(null); };

  // Tweaks
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply theme + accent
  useEffectApp(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    // Generate a "hot" variant
    document.documentElement.style.setProperty('--accent-hot',
      tweaks.accent === '#fdb827' ? '#ff8a00' :
      tweaks.accent === '#ff5a5a' ? '#d23636' :
      tweaks.accent === '#6ab7ff' ? '#3d8fe6' :
      tweaks.accent === '#7dd87d' ? '#4caf50' :
      '#ff6800'
    );
  }, [tweaks.theme, tweaks.accent]);

  const navigate = (r, params = {}) => {
    setRoute(r);
    setRouteParams(params);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const addToCart = (tire) => {
    setCart(c => {
      const existing = c.find(i => i.id === tire.id);
      if (existing) {
        return c.map(i => i.id === tire.id ? { ...i, qty: (i.qty || 1) + (tire.qty || 1) } : i);
      }
      return [...c, { ...tire, qty: tire.qty || 4 }];
    });
    // Brief notification could go here
  };

  const toggleFav = (id) => {
    setFavs(f => f.includes(id) ? f.filter(x => x !== id) : [...f, id]);
  };

  const cartCount = cart.reduce((s, i) => s + (i.qty || 1), 0);

  const renderPage = () => {
    switch (route) {
      case 'home': return <Home navigate={navigate} addToCart={addToCart} favs={favs} toggleFav={toggleFav}/>;
      case 'catalog': return <Catalog navigate={navigate} addToCart={addToCart} favs={favs} toggleFav={toggleFav}/>;
      case 'product': return <ProductDetail tireId={routeParams.id} navigate={navigate} addToCart={addToCart} favs={favs} toggleFav={toggleFav}/>;
      case 'garage': return <Garage navigate={navigate}/>;
      case 'quiz': return <Quiz navigate={navigate} addToCart={addToCart}/>;
      case 'cart': return <Cart cart={cart} setCart={setCart} navigate={navigate}/>;
      case 'checkout': return <Checkout cart={cart.length ? cart : [{...TIRES[0], qty: 4}]} setCart={setCart} navigate={navigate}/>;
      case 'services': return <Services navigate={navigate}/>;
      case 'account': return <Account navigate={navigate} favs={favs} user={user} onLogout={logout} onAuth={login}/>;
      default: return <Home navigate={navigate} addToCart={addToCart} favs={favs} toggleFav={toggleFav}/>;
    }
  };

  return (
    <div className="app-root" data-screen-label={route}>
      <Header route={route} navigate={navigate} cartCount={cartCount}/>
      {renderPage()}
      <Footer navigate={navigate}/>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks RUTA">
        <TweakSection label="Tema">
          <TweakRadio
            label="Modo"
            value={tweaks.theme}
            options={[{value: 'dark', label: 'Oscuro'}, {value: 'light', label: 'Claro'}]}
            onChange={v => setTweak('theme', v)}
          />
        </TweakSection>
        <TweakSection label="Color de acento">
          <TweakColor
            label="Acento"
            value={tweaks.accent}
            options={ACCENT_PALETTE}
            onChange={v => setTweak('accent', v)}
          />
        </TweakSection>
        <TweakSection label="Navegación rápida">
          <div style={{display:'grid', gridTemplateColumns: '1fr 1fr', gap: 6}}>
            {[
              ['home', 'Inicio'],
              ['catalog', 'Catálogo'],
              ['product', 'Producto', { id: 't01' }],
              ['garage', 'Mi Garage'],
              ['quiz', 'Asesor'],
              ['cart', 'Carrito'],
              ['checkout', 'Checkout'],
              ['services', 'Servicios'],
              ['account', 'Mi cuenta'],
            ].map(([key, lbl, params]) => (
              <button key={key}
                onClick={() => navigate(key, params || {})}
                style={{
                  padding: '8px 10px',
                  background: route === key ? 'var(--accent)' : 'rgba(255,255,255,0.05)',
                  color: route === key ? '#000' : 'var(--text)',
                  border: '1px solid rgba(255,255,255,0.1)',
                  borderRadius: 6,
                  fontSize: 12, fontWeight: 500,
                  cursor: 'pointer',
                  textAlign: 'left',
                }}>{lbl}</button>
            ))}
          </div>
        </TweakSection>
        <TweakSection label="Datos de prueba">
          <TweakButton label="Llenar carrito" onClick={() => {
            setCart([
              { ...TIRES[0], qty: 4, selectedSize: '205/55R16' },
              { ...TIRES[2], qty: 2, selectedSize: '195/65R15' },
            ]);
          }}/>
          <TweakButton label="Vaciar carrito" onClick={() => setCart([])}/>
          <TweakButton label="Marcar 4 favoritos" onClick={() => setFavs(['t01','t04','t07','t10'])}/>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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