/* ============================================================
   3DAX — App shell: store init, auth, admin/store routing, cart
   ============================================================ */
const { useState: uState, useEffect: uEffect } = React;

function Footer(){
  return (
    <footer className="footer grain">
      <div className="wrap footer__inner">
        <div className="footer__brand">
          <span className="brand__mark" style={{ fontSize:28 }}>3<span>D</span>AX</span>
          <p className="footer__tag">Deckboxes 3D de coleccionista.<br/>Hechas a mano, una capa cada vez.</p>
          <div className="footer__social">
            <a href="#" aria-label="Instagram">Instagram</a>
            <a href="#" aria-label="TikTok">TikTok</a>
            <a href="https://3daxofficial.etsy.com" target="_blank" rel="noopener" aria-label="Etsy">Etsy</a>
          </div>
        </div>
        <div className="footer__cols">
          <div className="footer__col">
            <h4>Catálogo</h4>
            <a href="deckbox-one-piece-tcg.html">Deckbox One Piece TCG</a>
            <a href="deckbox-riftbound.html">Deckbox Riftbound</a>
            <a href="deckbox-magic-mtg.html">Deckbox Magic (MTG)</a>
            <a href="custom-deckbox.html">Deckbox personalizada</a>
          </div>
          <div className="footer__col">
            <h4>Guías</h4>
            <a href="guia-cuantas-cartas-caben.html">¿Cuántas cartas caben?</a>
            <a href="guia-mejor-deckbox-one-piece.html">Mejor deckbox One Piece</a>
            <a href="guia-deckbox-3d-vs-plastico.html">3D vs. plástico</a>
            <a href="guias.html">Todas las guías</a>
          </div>
          <div className="footer__col">
            <h4>3DAX</h4>
            <a href="sobre-3dax.html">Sobre nosotros</a>
            <a href="preguntas-frecuentes.html">Preguntas frecuentes</a>
            <a href="#resenas">Reseñas</a>
          </div>
        </div>
      </div>
      <div className="wrap footer__bottom">
        <span>© 2026 3DAX · Hecho con 🛟 para fans de One Piece</span>
        <span>One Piece © Eiichiro Oda. 3DAX es un proyecto de fans no oficial.</span>
      </div>
    </footer>
  );
}

function scrollToId(id){
  const el = document.getElementById(id);
  if(!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - 64;
  window.scrollTo({ top:y, behavior:"smooth" });
}

function App(){
  const [ready, setReady] = uState(false);
  const user = useAuth();
  const products = useStoreData(() => (window.Store ? Store.products() : []));
  const reviews = useStoreData(() => (window.Store ? Store.reviews() : []));

  const [items, setItems] = uState(() => { try { return JSON.parse(localStorage.getItem("3dax_cart") || "[]"); } catch(e){ return []; } });
  const [detail, setDetail] = uState(null);
  const [cartOpen, setCartOpen] = uState(false);
  const [checkout, setCheckout] = uState(false);
  const [authMode, setAuthMode] = uState(null);   // 'login' | 'signup' | null
  const [accountOpen, setAccountOpen] = uState(false);
  const [view, setView] = uState("store");         // 'store' | 'admin'

  uEffect(() => { Store.init().then(() => setReady(true)); }, []);
  uEffect(() => { localStorage.setItem("3dax_cart", JSON.stringify(items)); }, [items]);
  uEffect(() => { if(window.location.hash === "#admin" && user && user.role === "admin") setView("admin"); }, [user]);

  const addToCart = (p, { way, qty }) => {
    const key = p.id + "::" + way.name;
    setItems(prev => {
      const ex = prev.find(i => i.key === key);
      if(ex) return prev.map(i => i.key === key ? { ...i, qty: Math.min(9, i.qty + qty) } : i);
      return [...prev, { key, id:p.id, name:p.name, price:p.price, images:p.images, way, qty }];
    });
    setCartOpen(true);
  };
  const setQty = (key, q) => setItems(prev => q <= 0 ? prev.filter(i => i.key !== key) : prev.map(i => i.key === key ? { ...i, qty: Math.min(9, q) } : i));
  const remove = (key) => setItems(prev => prev.filter(i => i.key !== key));
  const cartCount = items.reduce((s, i) => s + i.qty, 0);

  const requireAccountThen = () => { if(user) setAccountOpen(true); else setAuthMode("login"); };

  if(view === "admin" && user && user.role === "admin"){
    return <Admin user={user} onExit={() => { setView("store"); history.replaceState(null, "", " "); }} onLogout={() => { Store.logout(); setView("store"); }} />;
  }

  const storeProducts = products.filter(p => p.available !== false);

  return (
    <>
      <Nav cartCount={cartCount} user={user}
        onOpenCart={() => setCartOpen(true)}
        onAccount={requireAccountThen}
        onLogin={() => setAuthMode("login")} />
      <main>
        <Hero onShop={() => scrollToId("coleccion")} onStory={() => scrollToId("story")} />
        <Story onShop={() => scrollToId("coleccion")} />
        <Showcase />
        <Catalog products={storeProducts} onOpen={(p) => setDetail(p)} />
        <Process />
        <Reviews reviews={reviews} />
      </main>
      <Footer />

      {detail && <ProductDetail product={detail} onClose={() => setDetail(null)} onAdd={(p, opt) => addToCart(p, opt)} />}

      <CartDrawer open={cartOpen} items={items}
        onClose={() => setCartOpen(false)} onQty={setQty} onRemove={remove}
        onCheckout={() => { setCartOpen(false); setCheckout(true); }} />

      {checkout && <Checkout items={items} user={user}
        onClose={() => setCheckout(false)}
        onComplete={() => { setItems([]); setCheckout(false); }} />}

      <AuthModal open={!!authMode} mode={authMode} onClose={() => setAuthMode(null)}
        onAuthed={(u) => { if(u.role === "admin"){ setView("admin"); } else { setAccountOpen(true); } }} />

      <Account open={accountOpen} user={user}
        onClose={() => setAccountOpen(false)}
        onLogout={() => { Store.logout(); setAccountOpen(false); }}
        onOpenAdmin={() => { setAccountOpen(false); setView("admin"); }} />
    </>
  );
}

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