/* global React, ReactDOM, BK_DATA */
/* global Header, Footer, MiniCart, LoginModal, QuickView, ToastStack */
/* global PageHome, PageShop, PageProduct, PageCart, PageCheckout, PageLogin, PageAccount, PageWishlist, PageSearch, PageAbout, PageBlog, PageContact, PageAdmin */
/* global useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakRadio, TweakSelect, TweakColor, TweakButton */

const { useState: useStateApp, useEffect: useEffectApp, useMemo: useMemoApp, useRef: useRefApp, useCallback: useCallbackApp } = React;

// Hash-based router: #home, #shop?cat=cascos, #product?id=bk-0001, etc.
function parseHash() {
  const h = window.location.hash.replace(/^#\/?/, '') || 'home';
  const [path, qs] = h.split('?');
  const route = { name: path || 'home' };
  if (qs) {
    qs.split('&').forEach(pair => {
      const [k,v] = pair.split('=');
      route[k] = decodeURIComponent(v || '');
    });
  }
  return route;
}

function navigateTo(name, params = {}) {
  let h = '#' + name;
  const qs = Object.entries(params).filter(([_,v]) => v != null && v !== '').map(([k,v]) => `${k}=${encodeURIComponent(v)}`).join('&');
  if (qs) h += '?' + qs;
  window.location.hash = h;
  window.scrollTo({ top: 0, behavior: 'instant' });
}

// ============ APP ============
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#E60023",
  "displayFont": "Anton",
  "bodyFont": "Space Grotesk",
  "density": 3,
  "cardVariant": "default",
  "hero": "editorial"
}/*EDITMODE-END*/;

const FONT_MAP = {
  display: {
    'Anton': "'Anton', 'Oswald', sans-serif",
    'Bebas Neue': "'Bebas Neue', sans-serif",
    'Russo One': "'Russo One', sans-serif",
    'Archivo Black': "'Archivo Black', sans-serif",
    'Black Ops One': "'Black Ops One', cursive",
  },
  body: {
    'Space Grotesk': "'Space Grotesk', system-ui, sans-serif",
    'Manrope': "'Manrope', system-ui, sans-serif",
    'IBM Plex Sans': "'IBM Plex Sans', system-ui, sans-serif",
    'DM Sans': "'DM Sans', system-ui, sans-serif",
  }
};

function App() {
  const [tv, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Routing
  const [route, setRoute] = useStateApp(parseHash());
  useEffectApp(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = useCallbackApp((name, params) => navigateTo(name, params), []);

  // === Persistent state via localStorage ===
  const [cart, setCart] = useStateApp(() => {
    try { return JSON.parse(localStorage.getItem('bk_cart')) || []; } catch { return []; }
  });
  const [favs, setFavs] = useStateApp(() => {
    try { return new Set(JSON.parse(localStorage.getItem('bk_favs')) || []); } catch { return new Set(); }
  });
  const [user, setUser] = useStateApp(() => {
    try { return JSON.parse(localStorage.getItem('bk_user')); } catch { return null; }
  });

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

  // === UI state ===
  const [cartOpen, setCartOpen] = useStateApp(false);
  const [quickView, setQuickView] = useStateApp(null);
  const [loginOpen, setLoginOpen] = useStateApp(false);
  const [toasts, setToasts] = useStateApp([]);
  const [search, setSearch] = useStateApp('');
  const [flyer, setFlyer] = useStateApp(null);
  const cartIconRef = useRefApp(null);

  // === Theme & tweaks application ===
  useEffectApp(() => {
    document.documentElement.dataset.theme = tv.theme;
  }, [tv.theme]);
  useEffectApp(() => {
    document.documentElement.style.setProperty('--blood', tv.accent);
  }, [tv.accent]);
  useEffectApp(() => {
    document.documentElement.style.setProperty('--f-display', FONT_MAP.display[tv.displayFont] || FONT_MAP.display.Anton);
    document.documentElement.style.setProperty('--f-body',    FONT_MAP.body[tv.bodyFont]       || FONT_MAP.body['Space Grotesk']);
  }, [tv.displayFont, tv.bodyFont]);

  // === Toast helper ===
  const toast = useCallbackApp((msg, icon) => {
    const id = Math.random().toString(36).slice(2);
    setToasts(ts => [...ts, { id, msg, icon }]);
    setTimeout(() => setToasts(ts => ts.filter(t => t.id !== id)), 2400);
  }, []);

  // === Cart helpers ===
  const addToCart = useCallbackApp((product, originEl, opts = {}) => {
    const size = opts.size || product.sizes?.[0];
    const color = opts.color || product.colors?.[0];
    const colorName = ({'#0A0A0A':'Negro','#E60023':'Rojo','#FFFFFF':'Blanco','#3A3A3A':'Gris','#1c5eaa':'Azul','#7c2a1f':'Café','#d8a444':'Mostaza','#5a4a3a':'Café osc.','#FFD700':'Oro','#7a6a4a':'Olivo'})[color] || 'Color base';
    const qty = opts.qty || 1;
    const cartId = `${product.id}-${size}-${color}`;

    setCart(prev => {
      const exists = prev.find(c => c.cartId === cartId);
      if (exists) return prev.map(c => c.cartId === cartId ? { ...c, qty: c.qty + qty } : c);
      return [...prev, { ...product, cartId, size, color, colorName, qty }];
    });

    // Fly animation — find the cart icon by id
    const cartEl = document.getElementById('header-cart-btn');
    if (originEl && cartEl) {
      const start = originEl.getBoundingClientRect();
      const end = cartEl.getBoundingClientRect();
      setFlyer({
        id: Math.random().toString(36).slice(2),
        x0: start.left + start.width/2 - 30,
        y0: start.top + start.height/2 - 30,
        x1: end.left + end.width/2 - 30,
        y1: end.top + end.height/2 - 30,
        label: '+1',
      });
      setTimeout(() => setFlyer(null), 700);
    }

    toast(`Agregado: ${product.name}`);
  }, [toast]);

  const changeQty = useCallbackApp((cartId, qty) => {
    if (qty <= 0) {
      setCart(prev => prev.filter(c => c.cartId !== cartId));
    } else {
      setCart(prev => prev.map(c => c.cartId === cartId ? { ...c, qty } : c));
    }
  }, []);

  const removeFromCart = useCallbackApp((cartId) => {
    setCart(prev => prev.filter(c => c.cartId !== cartId));
    toast('Producto eliminado');
  }, [toast]);

  const clearCart = useCallbackApp(() => setCart([]), []);

  // === Favs ===
  const toggleFav = useCallbackApp((id) => {
    setFavs(prev => {
      const next = new Set(prev);
      if (next.has(id)) { next.delete(id); toast('Quitado de wishlist'); }
      else { next.add(id); toast('Guardado en wishlist'); }
      return next;
    });
  }, [toast]);

  // === Login ===
  const onLogin = useCallbackApp((u) => {
    setUser(u);
    setLoginOpen(false);
    toast(`Bienvenido, ${u.name.split(' ')[0]}`);
  }, [toast]);

  const onLogout = useCallbackApp(() => {
    setUser(null);
    navigate('home');
    toast('Sesión cerrada');
  }, [toast, navigate]);

  // === Search suggestions ===
  const suggestions = useMemoApp(() => {
    if (!search.trim()) return [];
    const q = search.toLowerCase();
    return BK_DATA.PRODUCTS.filter(p =>
      p.name.toLowerCase().includes(q) ||
      p.brand.toLowerCase().includes(q) ||
      p.tags.some(t => t.toLowerCase().includes(q))
    ).slice(0,8);
  }, [search]);

  // Expose helpers globally so deeper components can call
  useEffectApp(() => {
    window.BK_APP = { addToCart, toggleFav, openQuick: setQuickView, navigate };
  }, [addToCart, toggleFav, navigate]);

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

  // Quick-view handler can either open modal or navigate
  const onQuickView = useCallbackApp((product, mode='view') => {
    if (mode === 'detail') navigate('product', { id: product.id });
    else setQuickView(product);
  }, [navigate]);

  // Re-derive accent in nested forms
  const accent = tv.accent;
  const dark = tv.theme === 'dark';
  const density = +tv.density;
  const cardVariant = tv.cardVariant;
  const hero = tv.hero;

  // ---- Render route ----
  const renderRoute = () => {
    const common = { route, navigate, onAddToCart: addToCart, onToggleFav: toggleFav, onQuickView, favs, dark, accent, density, cardVariant, hero };
    switch (route.name) {
      case 'home':     return <PageHome {...common} setDensity={(n)=>setTweak('density', n)}/>;
      case 'shop':     return <PageShop {...common} setDensity={(n)=>setTweak('density', n)}/>;
      case 'product':  return <PageProduct {...common}/>;
      case 'cart':     return <PageCart items={cart} onChangeQty={changeQty} onRemove={removeFromCart} navigate={navigate} dark={dark}/>;
      case 'checkout': return <PageCheckout items={cart} navigate={navigate} dark={dark} onClearCart={clearCart}/>;
      case 'login':    return <PageLogin onLogin={onLogin} navigate={navigate}/>;
      case 'account':  return user ? <PageAccount user={user} onLogout={onLogout} navigate={navigate} favs={favs} dark={dark} route={route}/> : <PageLogin onLogin={onLogin} navigate={navigate}/>;
      case 'wishlist': return <PageWishlist {...common}/>;
      case 'search':   return <PageSearch {...common}/>;
      case 'about':    return <PageAbout navigate={navigate} accent={accent}/>;
      case 'blog':     return <PageBlog navigate={navigate} accent={accent}/>;
      case 'contact':  return <PageContact navigate={navigate} accent={accent}/>;
      case 'admin':    return <PageAdmin route={route} navigate={navigate} user={user} onLogout={onLogout}/>;
      default:         return <PageHome {...common}/>;
    }
  };

  const isAdmin = route.name === 'admin';

  return (
    <>
      {!isAdmin && (
        <Header
          route={route}
          navigate={navigate}
          cartCount={cartCount}
          favCount={favs.size}
          user={user}
          openCart={()=>setCartOpen(true)}
          openLogin={()=>setLoginOpen(true)}
          onLogout={onLogout}
          search={search}
          setSearch={setSearch}
          suggestions={suggestions}
          onSuggest={(p)=>{ setSearch(''); navigate('product', {id:p.id}); }}
          dark={dark}
          cartIconRef={cartIconRef}
        />
      )}

      {renderRoute()}

      {!isAdmin && <Footer navigate={navigate}/>}

      <MiniCart
        open={cartOpen}
        onClose={()=>setCartOpen(false)}
        items={cart}
        onChangeQty={changeQty}
        onRemove={removeFromCart}
        navigate={navigate}
        dark={dark}
      />

      <LoginModal
        open={loginOpen}
        onClose={()=>setLoginOpen(false)}
        onLogin={onLogin}
      />

      {quickView && (
        <QuickView
          product={quickView}
          onClose={()=>setQuickView(null)}
          onAddToCart={addToCart}
          onToggleFav={toggleFav}
          isFav={favs.has(quickView.id)}
          dark={dark}
          navigate={navigate}
        />
      )}

      <ToastStack toasts={toasts}/>

      {flyer && (
        <div className="fly-cart"
          style={{
            left: flyer.x0, top: flyer.y0,
            transform: `translate(${flyer.x1 - flyer.x0}px, ${flyer.y1 - flyer.y0}px) scale(.25)`,
            opacity: 0,
          }}>
          {flyer.label}
        </div>
      )}

    </>
  );
}

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