function App() {
  const P = window.POP;

  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  // ── Cargar catálogo de productos desde Supabase ───────────────────────────
  const [productsReady, setProductsReady] = React.useState(false);
  React.useEffect(() => {
    window.loadProducts()
      .then(() => setProductsReady(true))
      .catch(() => setProductsReady(true));
  }, []);

  const [route, setRoute] = React.useState({ name: 'home', params: {} });
  const [cart, setCart] = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [authOpen, setAuthOpen] = React.useState(false);
  const [searchOpen, setSearchOpen] = React.useState(false);
  const [user, setUser] = React.useState(null);
  const [lastOrder, setLastOrder] = React.useState(null);

  // ── Cargar perfil de usuario desde Supabase ────────────────────────────────
  const loadUserProfile = async (authUser) => {
    if (!window.sb) return;
    const { data: profile } = await window.sb.from('profiles').select('*').eq('id', authUser.id).single();
    setUser({
      id: authUser.id,
      email: authUser.email,
      name: profile?.name || authUser.email.split('@')[0],
      avatar: (profile?.name || authUser.email)[0].toUpperCase(),
      points: profile?.points || 0,
      level: profile?.level || 'MAGIC CELL Basic',
    });
  };

  // ── Supabase auth listener ────────────────────────────────────────────────
  React.useEffect(() => {
    if (!window.sb) return;
    window.sb.auth.getSession().then(({ data: { session } }) => {
      if (session) loadUserProfile(session.user);
    });
    const { data: { subscription } } = window.sb.auth.onAuthStateChange((event, session) => {
      if (session) loadUserProfile(session.user);
      else setUser(null);
    });
    return () => subscription.unsubscribe();
  }, []);

  // ── Persistir carrito en localStorage ────────────────────────────────────
  React.useEffect(() => {
    try { const c = JSON.parse(localStorage.getItem('voltio-cart') || '[]'); setCart(c); } catch {}
  }, []);
  React.useEffect(() => {
    localStorage.setItem('voltio-cart', JSON.stringify(cart));
  }, [cart]);

  // ── Manejar redirect de MercadoPago ──────────────────────────────────────
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const mpStatus = params.get('mp_status');
    const orderId  = params.get('order_id');
    if (!mpStatus) return;

    window.history.replaceState({}, '', '/');

    if (mpStatus === 'approved' && orderId) {
      // Cart aún está en localStorage, guardarlo como lastOrder y limpiarlo
      const savedCart = JSON.parse(localStorage.getItem('voltio-cart') || '[]');
      setLastOrder(savedCart);
      setCart([]);
      setRoute({ name: 'success', params: { orderId } });
    } else if (mpStatus === 'failure') {
      setRoute({ name: 'checkout', params: {} });
    }
  }, []);

  // ── Persistir ruta y hacer scroll top ────────────────────────────────────
  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [route]);

  const navigate = (name, params = {}) => setRoute({ name, params });

  const addToCart = (product) => {
    setCart(prev => {
      const existing = prev.find(it => it.id === product.id);
      if (existing) return prev.map(it => it.id === product.id ? { ...it, qty: it.qty + 1 } : it);
      return [...prev, { ...product, qty: 1 }];
    });
  };
  const updateQty = (id, qty) => {
    if (qty <= 0) return removeFromCart(id);
    setCart(prev => prev.map(it => it.id === id ? { ...it, qty } : it));
  };
  const removeFromCart = (id) => setCart(prev => prev.filter(it => it.id !== id));

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

  const screen = (() => {
    switch (route.name) {
      case 'home':     return <HomeScreen navigate={navigate} addToCart={addToCart} isMobile={isMobile}/>;
      case 'listing':  return <ListingScreen navigate={navigate} addToCart={addToCart} isMobile={isMobile} initial={route.params}/>;
      case 'pdp':      return <PdpScreen navigate={navigate} addToCart={addToCart} isMobile={isMobile} route={route.params} user={user}/>;
      case 'cart':     return <CartScreen navigate={navigate} cart={cart} updateQty={updateQty} removeFromCart={removeFromCart} addToCart={addToCart} isMobile={isMobile}/>;
      case 'checkout': return <CheckoutScreen navigate={navigate} cart={cart} isMobile={isMobile} user={user}
                                  onComplete={() => { setLastOrder(cart); setCart([]); navigate('success', {}); }}/>;
      case 'success':  return <SuccessScreen navigate={navigate} lastOrder={lastOrder} isMobile={isMobile} orderId={route.params?.orderId} user={user}/>;
      case 'orders':   return <OrdersScreen navigate={navigate} user={user} isMobile={isMobile}/>;
      default:         return <HomeScreen navigate={navigate} addToCart={addToCart} isMobile={isMobile}/>;
    }
  })();

  const showChrome = route.name !== 'success';
  const hideHeader = route.name === 'checkout';

  if (!productsReady) return (
    <div style={{ minHeight: '100vh', background: P.bg, display: 'flex', alignItems: 'center',
      justifyContent: 'center', flexDirection: 'column', gap: 12 }}>
      <img src="assets/logo.png" alt="MAGIC CELL!" className="pop-bounce-in" style={{ height: 80, width: 'auto', display: 'block' }} />
      <div style={{ fontSize: 13, color: P.dim, letterSpacing: 0.5 }}>Cargando catálogo...</div>
    </div>
  );

  return (
    <>
      <div style={{ minHeight: '100vh', background: P.bg }}>
        {showChrome && !hideHeader && (
          <PopHeader
            route={route} navigate={navigate}
            cartCount={cartCount} isMobile={isMobile}
            user={user}
            onOpenCart={() => setCartOpen(true)}
            onOpenMenu={() => setMenuOpen(true)}
            onOpenAccount={() => setAuthOpen(true)}
            onOpenSearch={() => setSearchOpen(true)}
          />
        )}

        <div key={`${route.name}-${JSON.stringify(route.params)}`}>
          {screen}
        </div>

        {showChrome && <PopFooter isMobile={isMobile}/>}
      </div>

      <CartDrawer
        open={cartOpen} onClose={() => setCartOpen(false)}
        cart={cart} updateQty={updateQty} removeFromCart={removeFromCart}
        navigate={navigate}
      />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} navigate={navigate}/>
      <AuthModal open={authOpen} onClose={() => setAuthOpen(false)} user={user} setUser={setUser}
        onNavigate={(name, params) => { setAuthOpen(false); navigate(name, params); }}/>
      <SearchOverlay
        open={searchOpen} onClose={() => setSearchOpen(false)}
        navigate={navigate} addToCart={addToCart} isMobile={isMobile}
      />
    </>
  );
}

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