// Routing helpers
var routeToPath = function (r) {
  if (r === 'home') return '/';
  if (r === 'blog') return '/blog';
  if (r === 'shop') return '/shop';
  if (r === 'register') return '/register';
  if (r.indexOf('blog/') === 0) return '/' + r;
  if (r.indexOf('tag/') === 0) return '/' + r;
  return '/' + r;
};

var pathToRoute = function (p) {
  var clean = p.replace(/^\/+/, '').replace(/\/+$/, '');
  if (!clean) return 'home';
  if (clean === 'blog') return 'blog';
  if (clean === 'shop') return 'shop';
  if (clean === 'register') return 'register';
  if (clean.indexOf('blog/') === 0) return clean;
  if (clean.indexOf('tag/') === 0) return clean;
  return clean;
};

// Placeholder for routes not yet built
var PlaceholderPage = function (props) {
  return (
    <div style={{ maxWidth: '1280px', margin: '0 auto', padding: '48px 28px', minHeight: '40vh' }}>
      <h2 style={{ fontFamily: 'var(--font-display)', fontSize: '36px', fontWeight: 400, color: 'var(--text)', marginBottom: '12px', letterSpacing: '0.02em' }}>{props.title}</h2>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--text-muted)' }}>
        <span style={{ color: 'var(--amber-dim)' }}>$</span> status<br/>
        <span style={{ color: 'var(--deep-amber)' }}>[building]</span> this module is under construction
      </div>
    </div>
  );
};

// Desktop App
var App = function () {
  var _useState1 = React.useState(function () { return pathToRoute(window.location.pathname); });
  var route = _useState1[0], setRoute = _useState1[1];

  var _useState2 = React.useState(function () {
    try { var s = localStorage.getItem('iba_cart'); return s ? JSON.parse(s) : []; } catch (e) { return []; }
  });
  var cart = _useState2[0], setCart = _useState2[1];

  var _useState3 = React.useState(null);
  var openProduct = _useState3[0], setOpenProduct = _useState3[1];

  var _useState4 = React.useState(null);
  var toast = _useState4[0], setToast = _useState4[1];

  var _useState5 = React.useState(null);
  var user = _useState5[0], setUser = _useState5[1];

  var _useState6 = React.useState(false);
  var searchOpen = _useState6[0], setSearchOpen = _useState6[1];

  var _useState7 = React.useState(false);
  var cartOpen = _useState7[0], setCartOpen = _useState7[1];

  var showToast = function (msg) { setToast(msg); setTimeout(function () { setToast(null); }, 2400); };

  var handleCartUpdate = function (idx, newQty) {
    setCart(function (c) {
      var next = c.slice();
      next[idx] = Object.assign({}, next[idx], { qty: newQty });
      return next;
    });
  };

  var handleCartRemove = function (idx) {
    setCart(function (c) {
      var next = c.slice();
      next.splice(idx, 1);
      return next;
    });
  };

  var handleCheckout = function () {
    showToast('Checkout coming soon');
  };

  React.useEffect(function () {
    try { localStorage.setItem('iba_cart', JSON.stringify(cart)); } catch (e) {}
  }, [cart]);

  React.useEffect(function () {
    var onPop = function (e) {
      var r = (e.state && e.state.route) || pathToRoute(window.location.pathname);
      setRoute(r);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    };
    window.addEventListener('popstate', onPop);
    history.replaceState({ route: route }, '', routeToPath(route));
    return function () { window.removeEventListener('popstate', onPop); };
  }, []);

  React.useEffect(function () {
    var hasLogin = document.cookie.split(';').some(function (c) {
      return c.trim().indexOf('iba_logged_in=') === 0;
    });
    if (!hasLogin) return;
    fetch('/api/auth', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ action: 'me' }),
    })
      .then(function (res) { return res.json(); })
      .then(function (data) {
        if (data && data.user) {
          setUser(data.user);
        } else {
          setUser(null);
        }
      })
      .catch(function () { setUser(null); });
  }, []);

  var handleLogout = function () {
    fetch('/api/auth', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ action: 'logout' }),
    })
      .then(function () { setUser(null); navigate('home'); })
      .catch(function () { setUser(null); navigate('home'); });
  };

  var navigate = function (r) {
    setRoute(r);
    history.pushState({ route: r }, '', routeToPath(r));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  var handleAdd = function (product, qty, opts) {
    setCart(function (c) {
      var key = product.id + '|' + (opts && opts.sizeId || '');
      var idx = c.findIndex(function (it) { return it.p.id + '|' + (it.sizeId || '') === key; });
      if (idx >= 0) {
        var next = c.slice();
        next[idx] = Object.assign({}, next[idx], { qty: next[idx].qty + qty });
        return next;
      }
      return c.concat([{ p: product, qty: qty, sizeId: opts && opts.sizeId || null }]);
    });
    setOpenProduct(null);
    showToast(product.name + ' added to cart');
  };

  var renderRoute = function () {
    if (route === 'home') {
      return window.Home
        ? <window.Home navigate={navigate} onOpen={setOpenProduct} />
        : <window.Shop onOpen={setOpenProduct} />;
    }
    if (route === 'shop') return <window.Shop onOpen={setOpenProduct} />;
    if (route === 'blog') {
      return window.BlogFeed
        ? <window.BlogFeed navigate={navigate} />
        : <PlaceholderPage title="Blog" />;
    }
    if (route.indexOf('blog/') === 0) {
      var slug = route.slice(5);
      return window.BlogPost
        ? <window.BlogPost slug={slug} navigate={navigate} />
        : <PlaceholderPage title="Post" />;
    }
    if (route.indexOf('tag/') === 0) {
      var tagSlug = route.slice(4);
      return window.BlogFeed
        ? <window.BlogFeed tag={tagSlug} navigate={navigate} />
        : <PlaceholderPage title={'Tag: ' + tagSlug} />;
    }
    if (route === 'about') return window.About ? <window.About navigate={navigate} /> : <PlaceholderPage title="About" />;
    if (route === 'cheatsheet') return window.Cheatsheet ? <window.Cheatsheet navigate={navigate} /> : <PlaceholderPage title="AI Security Cheat Sheet" />;
    if (route === 'login') return window.Login ? <window.Login navigate={navigate} /> : <PlaceholderPage title="Sign In" />;
    if (route === 'register') return window.Register ? <window.Register navigate={navigate} /> : <PlaceholderPage title="Create Account" />;
    if (route === 'account') return window.Account ? <window.Account navigate={navigate} user={user} onLogout={handleLogout} /> : <PlaceholderPage title="Account" />;
    return <PlaceholderPage title="404 — Not Found" />;
  };

  return (
    <>
      <window.Nav
        cartCount={cart.reduce(function (s, i) { return s + i.qty; }, 0)}
        route={route} navigate={navigate}
        openCart={function () { setCartOpen(true); }}
        onSearch={function () { setSearchOpen(true); }}
        user={user}
        onLogin={function () { navigate('login'); }}
        onAccount={function () { navigate('account'); }}
        onLogout={handleLogout}
      />
      <window.Ticker />
      <div id="scene">
        {renderRoute()}
        <window.Footer navigate={navigate} />
      </div>
      {window.Search && <window.Search open={searchOpen} onClose={function () { setSearchOpen(false); }} navigate={navigate} />}
      {ReactDOM.createPortal(
        <>
          <window.ProductDetail product={openProduct} onClose={function () { setOpenProduct(null); }} onAdd={handleAdd} />
          {window.Cart && <window.Cart items={cart} open={cartOpen} onClose={function () { setCartOpen(false); }} onUpdate={handleCartUpdate} onRemove={handleCartRemove} onCheckout={handleCheckout} />}
          {window.Search && <window.Search open={searchOpen} onClose={function () { setSearchOpen(false); }} navigate={navigate} />}
          {toast && <div className="ib-toast">{toast}</div>}
        </>,
        document.getElementById('overlays')
      )}
    </>
  );
};

// Mobile App
var MobileApp = function () {
  var _useState1 = React.useState(function () { return pathToRoute(window.location.pathname); });
  var route = _useState1[0], setRoute = _useState1[1];

  var _useState2 = React.useState(function () {
    try { var s = localStorage.getItem('iba_cart'); return s ? JSON.parse(s) : []; } catch (e) { return []; }
  });
  var cart = _useState2[0], setCart = _useState2[1];

  var _useState3 = React.useState(null);
  var openProduct = _useState3[0], setOpenProduct = _useState3[1];

  var _useState4 = React.useState(null);
  var toast = _useState4[0], setToast = _useState4[1];

  var _useState5 = React.useState(false);
  var cartOpen = _useState5[0], setCartOpen = _useState5[1];

  var _useState6 = React.useState(null);
  var user = _useState6[0], setUser = _useState6[1];

  var showToast = function (msg) { setToast(msg); setTimeout(function () { setToast(null); }, 2400); };

  var handleCartUpdate = function (idx, newQty) {
    setCart(function (c) {
      var next = c.slice();
      next[idx] = Object.assign({}, next[idx], { qty: newQty });
      return next;
    });
  };

  var handleCartRemove = function (idx) {
    setCart(function (c) {
      var next = c.slice();
      next.splice(idx, 1);
      return next;
    });
  };

  React.useEffect(function () {
    try { localStorage.setItem('iba_cart', JSON.stringify(cart)); } catch (e) {}
  }, [cart]);

  var navigate = function (r) {
    setRoute(r);
    history.pushState({ route: r }, '', routeToPath(r));
    window.scrollTo({ top: 0 });
  };

  React.useEffect(function () {
    var onPop = function () { setRoute(pathToRoute(window.location.pathname)); };
    window.addEventListener('popstate', onPop);
    history.replaceState({ route: route }, '', routeToPath(route));
    return function () { window.removeEventListener('popstate', onPop); };
  }, []);

  React.useEffect(function () {
    var hasLogin = document.cookie.split(';').some(function (c) {
      return c.trim().indexOf('iba_logged_in=') === 0;
    });
    if (!hasLogin) return;
    fetch('/api/auth', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ action: 'me' }),
    })
      .then(function (res) { return res.json(); })
      .then(function (data) {
        if (data && data.user) {
          setUser(data.user);
        } else {
          setUser(null);
        }
      })
      .catch(function () { setUser(null); });
  }, []);

  var handleLogout = function () {
    fetch('/api/auth', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ action: 'logout' }),
    })
      .then(function () { setUser(null); navigate('home'); })
      .catch(function () { setUser(null); navigate('home'); });
  };

  var handleAdd = function (product, qty, opts) {
    setCart(function (c) {
      var key = product.id + '|' + (opts && opts.sizeId || '');
      var idx = c.findIndex(function (it) { return it.p.id + '|' + (it.sizeId || '') === key; });
      if (idx >= 0) {
        var next = c.slice();
        next[idx] = Object.assign({}, next[idx], { qty: next[idx].qty + qty });
        return next;
      }
      return c.concat([{ p: product, qty: qty, sizeId: opts && opts.sizeId || null }]);
    });
    setOpenProduct(null);
    showToast(product.name + ' added to cart');
  };

  var activeTab = (route === 'home' || route === '/') ? 'home'
    : route === 'blog' || route.indexOf('blog/') === 0 || route.indexOf('tag/') === 0 ? 'blog'
    : route === 'shop' ? 'shop'
    : route === 'account' || route === 'login' || route === 'register' ? 'account'
    : 'home';

  var tabStyle = function (active) {
    return {
      flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '3px',
      padding: '8px 0', cursor: 'pointer',
      fontFamily: 'var(--font-mono)', fontSize: '9px', fontWeight: 700,
      letterSpacing: '0.1em', textTransform: 'uppercase',
      color: active ? 'var(--amber)' : 'var(--text-muted)',
      transition: 'color .15s',
    };
  };

  var renderRoute = function () {
    if (route === 'home') {
      return window.Home
        ? <window.Home navigate={navigate} onOpen={setOpenProduct} />
        : <window.Shop onOpen={setOpenProduct} />;
    }
    if (route === 'shop') return <window.Shop onOpen={setOpenProduct} />;
    if (route === 'blog') {
      return window.BlogFeed
        ? <window.BlogFeed navigate={navigate} />
        : <PlaceholderPage title="Blog" />;
    }
    if (route.indexOf('blog/') === 0) {
      var slug = route.slice(5);
      return window.BlogPost
        ? <window.BlogPost slug={slug} navigate={navigate} />
        : <PlaceholderPage title="Post" />;
    }
    if (route === 'login') return window.Login ? <window.Login navigate={navigate} /> : <PlaceholderPage title="Sign In" />;
    if (route === 'register') return window.Register ? <window.Register navigate={navigate} /> : <PlaceholderPage title="Create Account" />;
    if (route === 'account') return window.Account ? <window.Account navigate={navigate} user={user} onLogout={handleLogout} /> : <PlaceholderPage title="Account" />;
    return <PlaceholderPage title={route} />;
  };

  return (
    <>
      {/* Mobile nav */}
      <div style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
        background: 'rgba(10,10,10,0.9)', backdropFilter: 'blur(14px)',
        borderBottom: '1px solid var(--border)',
        padding: '12px 16px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="/" onClick={function (e) { e.preventDefault(); navigate('home'); }}>
          <img src="assets/images/taribai-logo.png" alt="itsbroken.ai"
            width="32" height="32"
            style={{ imageRendering: 'pixelated', display: 'block' }} />
        </a>
        <span onClick={function () { setCartOpen(true); }} style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-muted)', letterSpacing: '0.1em', textTransform: 'uppercase', cursor: 'pointer' }}>
          Cart ({cart.reduce(function (s, i) { return s + i.qty; }, 0)})
        </span>
      </div>

      <div id="mobile-scene" style={{ paddingTop: '56px' }}>
        {renderRoute()}
        <window.Footer navigate={navigate} />
      </div>

      {/* Tab bar */}
      <div style={{
        position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 1000,
        background: 'rgba(10,10,10,0.95)', backdropFilter: 'blur(14px)',
        borderTop: '1px solid var(--border)', display: 'flex',
      }}>
        <div style={tabStyle(activeTab === 'home')} onClick={function () { navigate('home'); }}>Home</div>
        <div style={tabStyle(activeTab === 'blog')} onClick={function () { navigate('blog'); }}>Blog</div>
        <div style={tabStyle(activeTab === 'shop')} onClick={function () { navigate('shop'); }}>Shop</div>
        <div style={tabStyle(activeTab === 'account')} onClick={function () { navigate('account'); }}>Account</div>
      </div>

      {ReactDOM.createPortal(
        <>
          <window.ProductDetail product={openProduct} onClose={function () { setOpenProduct(null); }} onAdd={handleAdd} />
          {window.Cart && <window.Cart items={cart} open={cartOpen} onClose={function () { setCartOpen(false); }} onUpdate={handleCartUpdate} onRemove={handleCartRemove} onCheckout={function () { showToast('Checkout coming soon'); }} />}
          {toast && <div className="ib-toast">{toast}</div>}
        </>,
        document.getElementById('overlays')
      )}
    </>
  );
};

// Mount — load config first so ghost adapter switches to live mode
(window.IBA_loadConfig ? window.IBA_loadConfig() : Promise.resolve()).then(function () {
  if (window.__IBA_MOBILE) {
    ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(MobileApp));
  } else {
    ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
  }
});