// Shared components & context
const { useState, useEffect, useMemo, useRef, useCallback, createContext, useContext } = React;

// ============== CART CONTEXT ==============
const CartCtx = createContext(null);
const useCart = () => useContext(CartCtx);

function CartProvider({ children }) {
  const [items, setItems] = useState(() => {
    try { return JSON.parse(localStorage.getItem('cc_cart') || '[]'); }
    catch { return []; }
  });
  const [open, setOpen] = useState(false);
  const [toast, setToast] = useState(null);

  useEffect(() => { localStorage.setItem('cc_cart', JSON.stringify(items)); }, [items]);

  const add = useCallback((product, qty = 1) => {
    setItems(prev => {
      const ex = prev.find(i => i.id === product.id);
      if (ex) return prev.map(i => i.id === product.id ? { ...i, qty: i.qty + qty } : i);
      return [...prev, { id: product.id, nombre: product.nombre, sub: product.sub, precio: product.precio, img: product.img, qty }];
    });
    setToast({ nombre: product.nombre, ts: Date.now() });
    burstConfetti();
  }, []);
  const remove = useCallback(id => setItems(prev => prev.filter(i => i.id !== id)), []);
  const setQty = useCallback((id, qty) => setItems(prev =>
    qty <= 0 ? prev.filter(i => i.id !== id) : prev.map(i => i.id === id ? { ...i, qty } : i)
  ), []);
  const total = items.reduce((s, i) => s + i.precio * i.qty, 0);
  const count = items.reduce((s, i) => s + i.qty, 0);

  useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(null), 2500);
    return () => clearTimeout(t);
  }, [toast]);

  return (
    <CartCtx.Provider value={{ items, add, remove, setQty, total, count, open, setOpen }}>
      {children}
      {toast && (
        <div className="toast show" key={toast.ts}>
          ¡La tengo!
          <small>{toast.nombre} agregado al carrito</small>
        </div>
      )}
    </CartCtx.Provider>
  );
}

// ============== CONFETTI ==============
function burstConfetti() {
  const colors = ['#c5281c', '#f7c90a', '#1b3a6b', '#2f7a3a', '#f2e7cf'];
  for (let i = 0; i < 24; i++) {
    const el = document.createElement('div');
    el.className = 'confetti';
    el.style.left = (window.innerWidth - 60) + 'px';
    el.style.top = (window.innerHeight - 60) + 'px';
    el.style.background = colors[i % colors.length];
    el.style.transform = `rotate(${Math.random() * 360}deg)`;
    el.style.opacity = '1';
    document.body.appendChild(el);
    const angle = Math.random() * Math.PI - Math.PI/2 - Math.PI/6;
    const dist = 120 + Math.random() * 160;
    const dx = Math.cos(angle + Math.PI) * dist;
    const dy = Math.sin(angle) * dist - 150;
    el.animate([
      { transform: `translate(0,0) rotate(0deg)`, opacity: 1 },
      { transform: `translate(${dx}px, ${dy}px) rotate(${Math.random()*720-360}deg)`, opacity: 0 }
    ], { duration: 900 + Math.random() * 400, easing: 'cubic-bezier(.2,.7,.3,1)' }).onfinish = () => el.remove();
  }
}

// ============== ROUTE CONTEXT ==============
const RouteCtx = createContext(null);
const useRoute = () => useContext(RouteCtx);

function RouteProvider({ children }) {
  const [route, setRouteState] = useState(() => {
    const h = window.location.hash.replace('#', '');
    if (h.startsWith('producto/')) return { page: 'producto', slug: h.split('/')[1] };
    if (h === 'tienda' || h === 'nosotros' || h === 'contacto') return { page: h };
    return { page: 'home' };
  });
  const setRoute = useCallback((r) => {
    setRouteState(r);
    const hash = r.page === 'home' ? '' : r.page === 'producto' ? `producto/${r.slug}` : r.page;
    window.location.hash = hash;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, []);
  useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace('#', '');
      if (h.startsWith('producto/')) setRouteState({ page: 'producto', slug: h.split('/')[1] });
      else if (h === 'tienda' || h === 'nosotros' || h === 'contacto') setRouteState({ page: h });
      else setRouteState({ page: 'home' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return <RouteCtx.Provider value={{ route, setRoute }}>{children}</RouteCtx.Provider>;
}

// ============== TOP NAV ==============
function TopNav() {
  const { route, setRoute } = useRoute();
  const { count, setOpen } = useCart();
  const today = new Date();
  const fecha = today.toLocaleDateString('es-MX', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
  const isActive = (p) => route.page === p ? 'active' : '';
  return (
    <>
      <div className="masthead-strip">
        <div className="row">
          <span>Edición del {fecha}</span>
          <span>· Tiendita en línea · Envíos a toda la República ·</span>
          <span>Compra segura · Correos de México</span>
        </div>
      </div>
      <nav className="top-nav" data-screen-label="01 Nav">
        <div className="top-nav-inner">
          <a className="nav-brand" onClick={(e) => { e.preventDefault(); setRoute({ page: 'home' }); }} href="#">
            <img src="logo.png" alt="Buffet Games"/>
          </a>
          <div className="nav-links">
            <a className={isActive('home')} onClick={(e)=>{e.preventDefault();setRoute({page:'home'})}}>Inicio</a>
            <a className={isActive('tienda')} onClick={(e)=>{e.preventDefault();setRoute({page:'tienda'})}}>Tienda</a>
            <a className={isActive('nosotros')} onClick={(e)=>{e.preventDefault();setRoute({page:'nosotros'})}}>Nosotros</a>
            <a className={isActive('contacto')} onClick={(e)=>{e.preventDefault();setRoute({page:'contacto'})}}>Contacto</a>
          </div>
          <button className="nav-cart" onClick={() => setOpen(true)}>
            <span>🛒 Carrito</span>
            <span className="count">{count}</span>
          </button>
        </div>
      </nav>
    </>
  );
}

// ============== TICKER ==============
function Ticker() {
  const msgs = [
    '¡LOS COLECCIONABLES DE TU INFANCIA — AQUÍ ESTÁN!',
    'ENVÍO POR CORREOS DE MÉXICO · $100 A TODA LA REPÚBLICA',
    'COMPRA 100% SEGURA',
    'YO SOY SPANKI · BUFFET GAMES EN YOUTUBE',
    'TAZOS · FIGURAS VUALÁ · PROMOCIONALES',
    'LA ENCICLOPEDIA MÁS GRANDE DE COLECCIONISMO',
  ];
  const doubled = [...msgs, ...msgs];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {doubled.map((m, i) => <span key={i}>{m}</span>)}
      </div>
    </div>
  );
}

// ============== CART DRAWER ==============
const BACKEND = '';

function CartDrawer() {
  const { items, open, setOpen, setQty, remove, total } = useCart();
  const [paying, setPaying] = useState(false);
  const [payErr, setPayErr] = useState(null);

  const handleStripeCheckout = useCallback(async () => {
    setPaying(true);
    setPayErr(null);
    try {
      const res = await fetch(`${BACKEND}/create-checkout-session`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ items }),
      });
      const data = await res.json();
      if (data.url) {
        window.location.href = data.url;
      } else {
        setPayErr(data.error || 'Error al iniciar el pago.');
        setPaying(false);
      }
    } catch (e) {
      setPayErr('No se pudo conectar con el servidor de pagos.');
      setPaying(false);
    }
  }, [items]);

  const similarProducts = useMemo(() => {
    if (items.length === 0 || !window.PRODUCTS) return [];
    
    // Extraer palabras clave de nombres, marcas y categorías en el carrito
    const keywords = new Set();
    const marcas = new Set();
    const categorias = new Set();
    const cartIds = new Set(items.map(it => it.id));

    items.forEach(it => {
      const full = window.PRODUCTS.find(p => p.id === it.id);
      if (full) {
        if (full.marca) marcas.add(full.marca);
        if (full.categoria) categorias.add(full.categoria);
        const nameParts = full.nombre.toLowerCase().split(/\s+/);
        nameParts.forEach(part => {
          if (part.length > 3 && !['tazos', 'figuras', 'coleccion', 'completa', 'lote'].includes(part)) {
            keywords.add(part);
          }
        });
      }
    });

    let similar = window.PRODUCTS.filter(p => {
      if (cartIds.has(p.id) || p.stock <= 0) return false;
      
      const pName = p.nombre.toLowerCase();
      // Tiene misma marca, categoría o coincide en palabras clave del nombre
      if (marcas.has(p.marca) || categorias.has(p.categoria)) return true;
      for (const kw of keywords) {
        if (pName.includes(kw)) return true;
      }
      return false;
    });

    // Mezclar
    similar.sort(() => 0.5 - Math.random());
    return similar.slice(0, 3);
  }, [items]);

  return (
    <>
      <div className={`cart-scrim ${open ? 'open' : ''}`} onClick={() => setOpen(false)} />
      <aside className={`cart-drawer ${open ? 'open' : ''}`}>
        <div className="cart-head">
          <h2>Mi morralito</h2>
          <button className="cart-close" onClick={() => setOpen(false)}>×</button>
        </div>
        <div className="cart-body-layout">
          <div className="cart-items">
            {items.length === 0 ? (
              <div className="cart-empty">
                <div className="big">¡Tiendita vacía!</div>
                <p>Aún no has apartado nada.<br/>Date una vuelta por la tienda.</p>
              </div>
            ) : items.map(it => (
              <div className="cart-item" key={it.id}>
                <img src={it.img} alt={it.nombre}/>
                <div>
                  <div className="name">{it.nombre}</div>
                  <div className="qty">${it.precio.toLocaleString('es-MX')} × {it.qty}</div>
                  <div className="qty" style={{marginTop: 4}}>
                    <button onClick={()=>setQty(it.id, it.qty-1)} style={{border:'1px solid #1a1611',padding:'0 6px',marginRight:4}}>–</button>
                    <button onClick={()=>setQty(it.id, it.qty+1)} style={{border:'1px solid #1a1611',padding:'0 6px'}}>+</button>
                    <span className="rm" onClick={()=>remove(it.id)} style={{marginLeft:10}}>eliminar</span>
                  </div>
                </div>
                <div className="price">${(it.precio*it.qty).toLocaleString('es-MX')}</div>
              </div>
            ))}
          </div>
          {items.length > 0 && (
            <div className="cart-sidebar">
              <div className="cart-foot">
                <div className="cart-totals"><span>Subtotal</span><span>${total.toLocaleString('es-MX')}</span></div>
                <div className="cart-totals"><span>Envío Correos MX</span><span>$100</span></div>
                <div className="cart-totals grand"><span>Total</span><span>${(total + 100).toLocaleString('es-MX')}</span></div>
                {payErr && <div style={{color:'var(--red)',fontSize:13,marginBottom:8,fontFamily:'Special Elite,monospace'}}>{payErr}</div>}
                <button
                  className="cart-checkout"
                  onClick={handleStripeCheckout}
                  disabled={paying}
                  style={{width:'100%',textAlign:'center',cursor: paying ? 'wait' : 'pointer', opacity: paying ? 0.7 : 1}}>
                  {paying ? 'Redirigiendo…' : '💳 Pagar con tarjeta →'}
                </button>
              </div>
              {similarProducts.length > 0 && (
                <div className="cart-similar">
                  <h4>También te puede interesar</h4>
                  <div className="similar-grid">
                    {similarProducts.map(p => (
                      <div key={p.id} className="similar-item" onClick={() => {
                          window.dispatchEvent(new CustomEvent('nav-producto', { detail: p.slug }));
                          setOpen(false);
                        }}>
                        <img src={p.img} alt={p.nombre}/>
                        <div>
                          <div className="sim-name">{p.nombre}</div>
                          <div className="sim-price">${p.precio.toLocaleString('es-MX')}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </aside>
    </>
  );
}

// ============== AUTH CONTEXT ==============
const AuthCtx = createContext(null);
const useAuth = () => useContext(AuthCtx);

function AuthProvider({ children }) {
  const [user, setUser] = useState(() => {
    try { const t = localStorage.getItem('bg_token'); return t ? JSON.parse(atob(t.split('.')[1])) : null; }
    catch { return null; }
  });
  const [showLogin, setShowLogin] = useState(false);
  const token = () => localStorage.getItem('bg_token');

  const login = async (email, password) => {
    const r = await fetch('/auth/login', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({email, password}) });
    const d = await r.json();
    if (!r.ok) throw new Error(d.error || 'Error al iniciar sesión');
    localStorage.setItem('bg_token', d.token);
    setUser(d.user);
    return d.user;
  };

  const register = async (nombre, email, password) => {
    const r = await fetch('/auth/register', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({nombre, email, password}) });
    const d = await r.json();
    if (!r.ok) throw new Error(d.error || 'Error al registrarse');
    localStorage.setItem('bg_token', d.token);
    setUser(d.user);
    return d.user;
  };

  const logout = () => { localStorage.removeItem('bg_token'); setUser(null); };

  return (
    <AuthCtx.Provider value={{ user, login, register, logout, token, showLogin, setShowLogin }}>
      {children}
      {showLogin && <LoginModal onClose={() => setShowLogin(false)} />}
    </AuthCtx.Provider>
  );
}

// ============== LOGIN MODAL ==============
function LoginModal({ onClose }) {
  const { login, register } = useAuth();
  const [tab, setTab] = useState('login');
  const [nombre, setNombre] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [err, setErr] = useState('');
  const [loading, setLoading] = useState(false);

  const handle = async (e) => {
    e.preventDefault();
    setErr(''); setLoading(true);
    try {
      if (tab === 'login') await login(email, password);
      else await register(nombre, email, password);
      onClose();
    } catch(ex) { setErr(ex.message); }
    finally { setLoading(false); }
  };

  const inp = { style:{width:'100%',padding:'10px 12px',border:'2px solid #1a1611',fontFamily:'Special Elite,monospace',fontSize:14,boxSizing:'border-box',background:'#fff',marginTop:4} };
  const lbl = { style:{fontFamily:'Oswald,sans-serif',fontSize:13,textTransform:'uppercase',letterSpacing:1.5,fontWeight:700,display:'block',marginTop:14} };

  return (
    <>
      <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(0,0,0,.55)',zIndex:9000}}/>
      <div style={{position:'fixed',top:'50%',left:'50%',transform:'translate(-50%,-50%)',background:'#fdf8ef',border:'4px solid #1a1611',boxShadow:'8px 8px 0 #1a1611',padding:'36px 32px',zIndex:9001,width:'min(92vw,400px)'}}>
        <button onClick={onClose} style={{position:'absolute',top:12,right:16,background:'none',border:'none',fontSize:22,cursor:'pointer',fontWeight:'bold'}}>×</button>
        <h2 style={{fontFamily:'Bungee,sans-serif',fontSize:24,color:'#c5281c',margin:'0 0 20px',textAlign:'center'}}>
          {tab==='login' ? 'Inicia Sesión' : 'Regístrate'}
        </h2>
        <div style={{display:'flex',gap:8,marginBottom:20}}>
          {['login','register'].map(t=>(
            <button key={t} onClick={()=>{setTab(t);setErr('');}} style={{flex:1,padding:'8px',fontFamily:'Oswald,sans-serif',fontWeight:700,fontSize:13,textTransform:'uppercase',letterSpacing:1,background:tab===t?'#1a1611':'transparent',color:tab===t?'#f7c90a':'#1a1611',border:'2px solid #1a1611',cursor:'pointer'}}>
              {t==='login'?'Entrar':'Crear cuenta'}
            </button>
          ))}
        </div>
        <form onSubmit={handle}>
          {tab==='register' && <>
            <label {...lbl}>Nombre</label>
            <input {...inp} type="text" value={nombre} onChange={e=>setNombre(e.target.value)} required placeholder="Tu nombre"/>
          </>}
          <label {...lbl}>Correo</label>
          <input {...inp} type="email" value={email} onChange={e=>setEmail(e.target.value)} required placeholder="tu@correo.com"/>
          <label {...lbl}>Contraseña</label>
          <input {...inp} type="password" value={password} onChange={e=>setPassword(e.target.value)} required placeholder={tab==='register'?'mínimo 6 caracteres':'tu contraseña'} minLength={tab==='register'?6:1}/>
          {err && <p style={{color:'#c5281c',fontFamily:'Special Elite,monospace',fontSize:13,marginTop:10}}>{err}</p>}
          <button type="submit" disabled={loading} style={{width:'100%',marginTop:20,padding:'12px',background:'#c5281c',color:'#fff',fontFamily:'Bungee,sans-serif',fontSize:16,border:'3px solid #1a1611',boxShadow:'4px 4px 0 #1a1611',cursor:loading?'wait':'pointer',opacity:loading?.7:1}}>
            {loading ? 'Un momento…' : tab==='login' ? 'Entrar →' : 'Crear cuenta →'}
          </button>
        </form>
      </div>
    </>
  );
}

// ============== NEWSLETTER WIDGET ==============
function NewsletterWidget() {
  const { user } = useAuth();
  const [email, setEmail] = useState('');
  const [done, setDone] = useState(false);
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState('');

  const handleSub = async (e) => {
    e.preventDefault();
    setLoading(true); setErr('');
    try {
      const r = await fetch('/newsletter/subscribe', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({ email: email || user?.email, nombre: user?.nombre })
      });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error || 'Error');
      setDone(true);
    } catch(ex) { setErr(ex.message); }
    finally { setLoading(false); }
  };

  if (done) return (
    <div style={{textAlign:'center',padding:'20px'}}>
      <div style={{fontSize:40}}>🎉</div>
      <p style={{fontFamily:'Bungee,sans-serif',fontSize:18,color:'#2a7a3a',margin:'8px 0 0'}}>¡Ya estás en el buffet!</p>
      <p style={{fontFamily:'Special Elite,monospace',fontSize:13,color:'#666'}}>Te avisaremos cuando llegue algo nuevo.</p>
    </div>
  );

  return (
    <form onSubmit={handleSub} style={{display:'flex',gap:8,flexWrap:'wrap',justifyContent:'center',alignItems:'flex-end'}}>
      {!user?.email && (
        <input
          type="email" required value={email} onChange={e=>setEmail(e.target.value)}
          placeholder="tu@correo.com"
          style={{padding:'10px 14px',border:'3px solid #1a1611',fontFamily:'Special Elite,monospace',fontSize:14,minWidth:220,flex:1}}/>
      )}
      <button type="submit" disabled={loading} style={{padding:'10px 20px',background:'#c5281c',color:'#fff',fontFamily:'Bungee,sans-serif',fontSize:14,border:'3px solid #1a1611',boxShadow:'4px 4px 0 #1a1611',cursor:loading?'wait':'pointer',whiteSpace:'nowrap'}}>
        {loading ? 'Un momento…' : '📬 Quiero saber qué llega nuevo'}
      </button>
      {err && <p style={{width:'100%',color:'#c5281c',fontFamily:'Special Elite,monospace',fontSize:13,margin:'4px 0 0'}}>{err}</p>}
    </form>
  );
}

// Update TopNav to show auth state
const _OriginalTopNav = TopNav;
function TopNavWithAuth() {
  const { user, setShowLogin, logout } = useAuth();
  const { count, setOpen } = useCart();
  const { route, setRoute } = useRoute();
  const today = new Date();
  const fecha = today.toLocaleDateString('es-MX', { weekday:'long', day:'numeric', month:'long', year:'numeric' });
  const isActive = (p) => route.page === p ? 'active' : '';
  return (
    <>
      <div className="masthead-strip">
        <div className="row">
          <span>Edición del {fecha}</span>
          <span>· Tiendita en línea · Envíos a toda la República ·</span>
          <span>Compra segura · Correos de México</span>
        </div>
      </div>
      <nav className="top-nav" data-screen-label="01 Nav">
        <div className="top-nav-inner">
          <a className="nav-brand" onClick={(e)=>{e.preventDefault();setRoute({page:'home'});}} href="#">
            <img src="logo.png" alt="Buffet Games"/>
          </a>
          <div className="nav-links">
            <a className={isActive('home')} onClick={(e)=>{e.preventDefault();setRoute({page:'home'})}}>Inicio</a>
            <a className={isActive('tienda')} onClick={(e)=>{e.preventDefault();setRoute({page:'tienda'})}}>Tienda</a>
            <a className={isActive('nosotros')} onClick={(e)=>{e.preventDefault();setRoute({page:'nosotros'})}}>Nosotros</a>
            <a className={isActive('contacto')} onClick={(e)=>{e.preventDefault();setRoute({page:'contacto'})}}>Contacto</a>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:8}}>
            {user ? (
              <div style={{display:'flex',alignItems:'center',gap:8}}>
                <span style={{fontFamily:'Special Elite,monospace',fontSize:12,color:'var(--paper)'}}>Hola, <strong>{user.nombre?.split(' ')[0]}</strong></span>
                <button onClick={logout} style={{background:'transparent',border:'1px solid var(--paper)',color:'var(--paper)',fontFamily:'Special Elite,monospace',fontSize:11,padding:'3px 8px',cursor:'pointer'}}>Salir</button>
              </div>
            ) : (
              <button onClick={()=>setShowLogin(true)} style={{background:'transparent',border:'2px solid var(--yellow)',color:'var(--yellow)',fontFamily:'Oswald,sans-serif',fontWeight:700,fontSize:13,padding:'5px 12px',cursor:'pointer',letterSpacing:1}}>
                Iniciar sesión
              </button>
            )}
            <button className="nav-cart" onClick={()=>setOpen(true)}>
              <span>🛒 Carrito</span>
              <span className="count">{count}</span>
            </button>
          </div>
        </div>
      </nav>
    </>
  );
}

Object.assign(window, { CartProvider, useCart, RouteProvider, useRoute, TopNav: TopNavWithAuth, Ticker, CartDrawer, AuthProvider, useAuth, LoginModal, NewsletterWidget });