// Top nav + cart drawer

const TopNav = ({ route, setRoute, accent }) => {
  const cart = useCart();
  const links = [
    { id: 'home', label: 'Index' },
    { id: 'shop', label: 'Drop 01' },
    { id: 'about', label: 'Manifesto' },
  ];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(5,8,10,0.85)',
      backdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--uwr-line)',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center', padding: '14px 32px', gap: 24,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <a onClick={() => setRoute({ name: 'home' })} style={{
            fontFamily: 'var(--uwr-head)', fontSize: 18,
            letterSpacing: '0.02em', cursor: 'pointer',
          }}>UWR/SHOP</a>
        </div>

        <div style={{ display: 'flex', gap: 28, justifyContent: 'center' }}>
          {links.map((l) => {
            const active = route.name === l.id || (l.id === 'shop' && (route.name === 'shop' || route.name === 'pdp'));
            return (
              <a key={l.id} onClick={() => setRoute({ name: l.id })} style={{
                fontFamily: 'var(--uwr-head)', fontSize: 12,
                textTransform: 'uppercase', letterSpacing: '0.06em',
                cursor: 'pointer',
                color: active ? 'var(--uwr-off)' : 'var(--uwr-off-dim)',
                borderBottom: active ? `1px solid ${accent}` : '1px solid transparent',
                paddingBottom: 4,
                transition: 'color 0.15s',
              }}>{l.label}</a>
            );
          })}
        </div>

        <div style={{ display: 'flex', gap: 18, justifyContent: 'flex-end', alignItems: 'center' }}>
          <span className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>36°51'S · 174°46'E</span>
          <button onClick={() => {}} style={{
            background: 'transparent', border: 'none', color: 'var(--uwr-off)',
            display: 'flex', alignItems: 'center', gap: 6, padding: 4,
          }}><SearchIcon /></button>
          <button onClick={() => cart.setOpen(true)} style={{
            background: 'transparent', border: 'none', color: 'var(--uwr-off)',
            display: 'flex', alignItems: 'center', gap: 8, padding: 4, position: 'relative',
          }}>
            <CartIcon />
            <span className="uwr-mono" style={{ color: 'var(--uwr-off)' }}>[{String(cart.count).padStart(2,'0')}]</span>
          </button>
        </div>
      </div>
    </nav>
  );
};

const CartDrawer = ({ setRoute, accent }) => {
  const cart = useCart();
  if (!cart.open) return null;
  return (
    <>
      <div onClick={() => cart.setOpen(false)} style={{
        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)',
        zIndex: 100, animation: 'uwrFade 0.2s ease',
      }} />
      <div style={{
        position: 'fixed', top: 0, right: 0, bottom: 0,
        width: 'min(440px, 92vw)',
        background: 'var(--uwr-black)',
        borderLeft: '1px solid var(--uwr-line-strong)',
        zIndex: 101,
        display: 'flex', flexDirection: 'column',
        animation: 'uwrSlideIn 0.22s cubic-bezier(.2,.7,.3,1)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '20px 24px', borderBottom: '1px solid var(--uwr-line)',
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
            <span className="uwr-head" style={{ fontSize: 20 }}>BAG</span>
            <span className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>[{String(cart.count).padStart(2,'0')} ITEMS]</span>
          </div>
          <button onClick={() => cart.setOpen(false)} style={{
            background: 'transparent', border: 'none', color: 'var(--uwr-off)', padding: 4,
          }}><CloseIcon /></button>
        </div>

        <div style={{ flex: 1, overflowY: 'auto' }} className="uwr-no-scrollbar">
          {cart.items.length === 0 ? (
            <div style={{ padding: 60, textAlign: 'center' }}>
              <div className="uwr-head" style={{ fontSize: 24, marginBottom: 8 }}>EMPTY</div>
              <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>NOTHING IN BAG / SURFACE TO SHOP</div>
              <button onClick={() => { cart.setOpen(false); setRoute({ name: 'shop' }); }} className="uwr-btn" style={{ marginTop: 32 }}>
                BROWSE THE DROP <Arrow />
              </button>
            </div>
          ) : cart.items.map((i) => (
            <div key={i.key} style={{
              display: 'grid', gridTemplateColumns: '80px 1fr auto',
              gap: 16, padding: '20px 24px',
              borderBottom: '1px solid var(--uwr-line)',
            }}>
              <ProductPlaceholder name={i.product.code} color={i.product.color} style={{ width: 80, height: 96 }} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div className="uwr-head" style={{ fontSize: 15 }}>{i.product.name.toUpperCase()}</div>
                <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>SIZE {i.size} · {i.color.toUpperCase()}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 4 }}>
                  <button onClick={() => cart.updateQty(i.key, i.qty - 1)} style={{
                    background: 'transparent', color: 'var(--uwr-off)', border: '1px solid var(--uwr-line)',
                    width: 22, height: 22, padding: 0, fontSize: 12,
                  }}>−</button>
                  <span className="uwr-mono" style={{ color: 'var(--uwr-off)' }}>{String(i.qty).padStart(2,'0')}</span>
                  <button onClick={() => cart.updateQty(i.key, i.qty + 1)} style={{
                    background: 'transparent', color: 'var(--uwr-off)', border: '1px solid var(--uwr-line)',
                    width: 22, height: 22, padding: 0, fontSize: 12,
                  }}>+</button>
                  <button onClick={() => cart.remove(i.key)} className="uwr-mono" style={{
                    background: 'transparent', color: 'var(--uwr-off-dim)', border: 'none',
                    marginLeft: 'auto', textDecoration: 'underline', textUnderlineOffset: 3,
                  }}>REMOVE</button>
                </div>
              </div>
              <div className="uwr-head" style={{ fontSize: 15 }}>${i.product.price * i.qty}</div>
            </div>
          ))}
        </div>

        {cart.items.length > 0 && (
          <div style={{ borderTop: '1px solid var(--uwr-line-strong)', padding: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <span className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>SUBTOTAL</span>
              <span className="uwr-mono" style={{ color: 'var(--uwr-off)' }}>${cart.subtotal}.00</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 18 }}>
              <span className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>SHIPPING</span>
              <span className="uwr-mono" style={{ color: 'var(--uwr-off)' }}>CALCULATED AT NEXT STEP</span>
            </div>
            <button className="uwr-btn" style={{ width: '100%', justifyContent: 'space-between', background: accent === 'red' ? 'var(--uwr-red)' : 'var(--uwr-cyan)', color: accent === 'red' ? 'var(--uwr-off)' : 'var(--uwr-black)' }}>
              <span>CHECKOUT — ${cart.subtotal}.00</span><Arrow />
            </button>
            <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', textAlign: 'center', marginTop: 14, fontSize: 10 }}>
              FREE SHIPPING ABOVE $120 · 30-DAY RETURNS
            </div>
          </div>
        )}
      </div>
    </>
  );
};

Object.assign(window, { TopNav, CartDrawer });