// app.jsx — Main FlowFire Defense storefront

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "editorial",
  "navStyle": "icon-label",
  "accent": "#c8410d",
  "displayFont": "GT America",
  "showPriceUSD": true,
  "lightMode": false
}/*EDITMODE-END*/;

const HERO_VARIANTS = ['editorial', 'minimal', 'cinematic'];
const NAV_STYLES = ['icon-label', 'icon-only', 'pill'];
const FONT_PAIRS = ['GT America', 'Editorial Serif', 'Industrial Sans'];

function FlowFireApp() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState({ name: 'home' }); // home | shop | pdp | notes
  const [menu, setMenu] = React.useState(false);
  const [search, setSearch] = React.useState(false);
  const [cart, setCart] = React.useState(false);
  const [cartItems, setCartItems] = React.useState([
    { id: 'i1', product: FF_PRODUCTS[0], qty: 1, variant: FF_PRODUCTS[0].variants[0] },
  ]);
  const [checkoutMode, setCheckoutMode] = React.useState(null); // null | 'checkout' | 'complete'
  const [toast, setToast] = React.useState('');
  const [scrolled, setScrolled] = React.useState(false);
  const [hideNav, setHideNav] = React.useState(false);
  const lastY = React.useRef(0);

  // Hash-route deep linking so the overview canvas can load each screen in its own iframe.
  // Shapes: #/home, #/home?hero=minimal, #/shop, #/pdp/p1, #/cart, #/checkout, #/complete, #/search, #/notes, #/menu
  React.useEffect(() => {
    const apply = () => {
      const h = window.location.hash.replace(/^#\/?/, '');
      if (!h) return;
      const [path, query = ''] = h.split('?');
      const parts = path.split('/');
      const params = new URLSearchParams(query);
      if (parts[0] === 'home') {
        setRoute({ name: 'home' });
        if (params.get('hero')) setTweak('heroVariant', params.get('hero'));
      } else if (parts[0] === 'shop') {
        setRoute({ name: 'shop' });
      } else if (parts[0] === 'pdp') {
        setRoute({ name: 'pdp', id: parts[1] || FF_PRODUCTS[0].id });
      } else if (parts[0] === 'notes') {
        setRoute({ name: 'notes' });
      } else if (parts[0] === 'cart') {
        setRoute({ name: 'shop' });
        setTimeout(() => setCart(true), 50);
      } else if (parts[0] === 'checkout') {
        setRoute({ name: 'home' });
        setTimeout(() => setCheckoutMode('checkout'), 50);
      } else if (parts[0] === 'complete') {
        setTimeout(() => setCheckoutMode('complete'), 50);
      } else if (parts[0] === 'search') {
        setRoute({ name: 'home' });
        setTimeout(() => setSearch(true), 50);
      } else if (parts[0] === 'how') {
        setRoute({ name: 'how' });
      } else if (parts[0] === 'account') {
        setRoute({ name: 'account' });
      } else if (parts[0] === 'support') {
        setRoute({ name: 'support' });
      } else if (parts[0] === 'compliance') {
        setRoute({ name: 'compliance' });
      } else if (parts[0] === 'menu') {
        setRoute({ name: 'home' });
        setTimeout(() => setMenu(true), 50);
      }
    };
    apply();
    window.addEventListener('hashchange', apply);
    return () => window.removeEventListener('hashchange', apply);
  }, []);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--ff-orange', tweaks.accent);
    const dim = hexAlpha(tweaks.accent, 0.12);
    document.documentElement.style.setProperty('--ff-orange-dim', dim);
    document.documentElement.style.setProperty('--ff-display', fontStackFor(tweaks.displayFont));
    if (tweaks.lightMode) {
      document.documentElement.classList.add('ff-light');
    } else {
      document.documentElement.classList.remove('ff-light');
    }
  }, [tweaks.accent, tweaks.displayFont, tweaks.lightMode]);

  const handleScroll = (e) => {
    const y = e.target.scrollTop;
    setScrolled(y > 16);
    if (Math.abs(y - lastY.current) > 14) {
      setHideNav(y > lastY.current && y > 200);
      lastY.current = y;
    }
  };

  const addToCart = (product, qty, variant) => {
    setCartItems(its => {
      const existing = its.find(i => i.product.id === product.id && i.variant === variant);
      if (existing) {
        return its.map(i => i === existing ? { ...i, qty: i.qty + qty } : i);
      }
      return [...its, { id: 'i' + Date.now(), product, qty, variant }];
    });
    setToast(`Added to cart · ${product.name}`);
  };

  const cartCount = cartItems.reduce((s, i) => s + i.qty, 0);

  const openProduct = (id) => { setRoute({ name: 'pdp', id }); window.__ffScroll && (window.__ffScroll.scrollTop = 0); };
  const goNav = (k) => {
    if (k === 'cart') { setCart(true); return; }
    if (k === 'search') { setSearch(true); return; }
    setRoute({ name: k });
    if (window.__ffScroll) window.__ffScroll.scrollTop = 0;
  };

  // Checkout flow takes over the screen entirely
  if (checkoutMode === 'checkout') {
    return (
      <CheckoutScreen items={cartItems}
        onBack={() => setCheckoutMode(null)}
        onComplete={() => { setCheckoutMode('complete'); setCartItems([]); }}/>
    );
  }
  if (checkoutMode === 'complete') {
    return <OrderComplete onBack={() => { setCheckoutMode(null); setRoute({ name: 'home' }); }}/>;
  }

  const showTopBar = route.name !== 'pdp';

  return (
    <>
      <div ref={(el) => { window.__ffScroll = el; }}
        onScroll={handleScroll}
        className="ff-noise"
        style={{
          height: '100%', overflowY: 'auto', overflowX: 'hidden',
          background: 'var(--ff-bg)', color: 'var(--ff-text)',
          position: 'relative',
        }}>
        {showTopBar && (
          <TopBar
            onMenu={() => setMenu(true)}
            onSearch={() => setSearch(true)}
            onCart={() => setCart(true)}
            cartCount={cartCount}
            scrolled={scrolled}/>
        )}

        {route.name === 'home' && (
          <HomeScreen
            heroVariant={tweaks.heroVariant}
            onOpenProduct={openProduct}
            onNav={(k) => goNav(k)}/>
        )}
        {route.name === 'shop' && (
          <ShopScreen onOpenProduct={openProduct} onNav={goNav}/>
        )}
        {route.name === 'pdp' && (
          <PDPScreen productId={route.id}
            onBack={() => setRoute({ name: 'shop' })}
            onAddCart={addToCart}
            onOpenCart={() => setCart(true)}/>
        )}
        {route.name === 'notes' && (
          <FieldNotesScreen/>
        )}
        {route.name === 'support' && <SupportScreen onNav={goNav}/>}
        {route.name === 'how' && <HowItWorksScreen onNav={goNav}/>}
        {route.name === 'account' && <AccountScreen onNav={goNav}/>}
        {route.name === 'compliance' && <ComplianceScreen onNav={goNav}/>}
      </div>

      <BottomNav active={route.name === 'pdp' ? 'shop' : route.name}
        onChange={goNav} hidden={hideNav}
        style={tweaks.navStyle} cartCount={cartCount}/>

      <MenuDrawer open={menu} onClose={() => setMenu(false)} onNav={goNav}/>
      {search && <SearchScreen onOpenProduct={(id) => { openProduct(id); setSearch(false); }} onClose={() => setSearch(false)}/>}
      <CartDrawer open={cart} onClose={() => setCart(false)}
        items={cartItems} setItems={setCartItems}
        onCheckout={() => { setCart(false); setCheckoutMode('checkout'); }}/>
      <Toast msg={toast} onDone={() => setToast('')}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero layout">
          <TweakRadio label="Variant"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={HERO_VARIANTS.map(v => ({ value: v, label: v.replace('-', ' ') }))}/>
        </TweakSection>
        <TweakSection label="Bottom nav">
          <TweakRadio label="Style"
            value={tweaks.navStyle}
            onChange={(v) => setTweak('navStyle', v)}
            options={NAV_STYLES.map(v => ({ value: v, label: v }))}/>
        </TweakSection>
        <TweakSection label="Type">
          <TweakSelect label="Display font" value={tweaks.displayFont} onChange={(v) => setTweak('displayFont', v)}
            options={FONT_PAIRS.map(f => ({ value: f, label: f }))}/>
        </TweakSection>
        <TweakSection label="Color">
          <TweakColor label="Accent" value={tweaks.accent} onChange={(v) => setTweak('accent', v)}/>
        </TweakSection>
        <TweakSection label="Theme">
          <TweakToggle label="Light mode" value={tweaks.lightMode}
            onChange={(v) => setTweak('lightMode', v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function Placeholder({ title }) {
  return (
    <div style={{ padding: '120px 24px', textAlign: 'center' }}>
      <div className="eyebrow" style={{ marginBottom: 12 }}>COMING SOON</div>
      <h1 className="display" style={{ fontSize: 28, margin: 0, fontWeight: 600 }}>{title}</h1>
      <p style={{ color: 'var(--ff-text-2)', marginTop: 12, fontSize: 14 }}>
        This screen is part of the design exploration but isn't built out yet.
      </p>
    </div>
  );
}

function hexAlpha(hex, a) {
  const m = hex.replace('#', '');
  const r = parseInt(m.slice(0, 2), 16), g = parseInt(m.slice(2, 4), 16), b = parseInt(m.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
}
function fontStackFor(name) {
  if (name === 'Editorial Serif') return '"Fraunces", "GT Sectra", Georgia, serif';
  if (name === 'Industrial Sans') return '"Space Grotesk", "Inter", system-ui, sans-serif';
  return '"GT America", "Inter", system-ui, sans-serif';
}

Object.assign(window, { FlowFireApp });