// brownie/page-store.jsx — Page 2: scrollable producer list with Buy 1/10/100 chips.

function PageStore({ engine }) {
  const { state, buy } = engine;
  const [buyQty, setBuyQty] = React.useState(1);

  return (
    <div className="be-page">
      <div className="store-bg" />

      <div className="page-header">
        <h2>Store</h2>
        <div className="sub">Buy producers to bake while you rest</div>
        <div className="crumbs-pill">
          <span className="dot" />
          {window.beFmt(Math.floor(state.crumbs))}
        </div>
        <div className="buy-chips">
          {[1, 10, 100].map(n => (
            <div
              key={n}
              className={`chip ${buyQty === n ? 'active' : ''}`}
              onClick={() => setBuyQty(n)}
            >
              Buy ×{n}
            </div>
          ))}
        </div>
      </div>

      <div className="store-list">
        {(() => {
          const visibleList = window.BE_PRODUCERS.filter(p => {
            const owned = state.producers[p.id] || 0;
            return state.totalEarned >= p.unlockAt || owned > 0;
          });

          // Find next locked one to show as a teaser
          const teaser = window.BE_PRODUCERS.find(p => {
            const owned = state.producers[p.id] || 0;
            return state.totalEarned < p.unlockAt && owned === 0;
          });

          if (visibleList.length === 0) {
            return (
              <div style={{ textAlign: 'center', color: 'var(--parchment)', opacity: 0.55, marginTop: 60, fontSize: 13, padding: '0 30px', lineHeight: 1.6 }}>
                Tap the brownie on the Bakery tab to bake your first crumbs.
              </div>
            );
          }

          return (
            <>
              {visibleList.map(p => {
                const owned = state.producers[p.id] || 0;
                const cost = window.bePriceBulk(p, owned, buyQty);
                const affordable = state.crumbs >= cost;
                const pBps = window.beProducerBps(p, state);

                return (
                  <div
                    key={p.id}
                    className={`producer-row ${affordable ? 'affordable' : ''}`}
                    onClick={() => affordable && buy(p.id, buyQty)}
                  >
                    <div className="producer-icon">
                      {window.BE_PRODUCER_ICONS[p.id]}
                    </div>
                    <div className="producer-body">
                      <div className="producer-name">{p.name}</div>
                      <div className="producer-meta">
                        <span className="producer-price">
                          <span className="crumb-dot" />
                          {window.beFmt(cost)}
                        </span>
                        {pBps > 0 && (
                          <span className="producer-bps">+{window.beFmt(pBps)}/s</span>
                        )}
                      </div>
                      <div className="producer-tag">{p.tagline}</div>
                    </div>
                    <div className="producer-count">
                      {owned}
                      <small>owned</small>
                    </div>
                  </div>
                );
              })}

              {teaser && (
                <div className="producer-row locked" style={{ marginTop: 14 }}>
                  <div className="producer-icon">
                    {window.BE_PRODUCER_ICONS[teaser.id]}
                  </div>
                  <div className="producer-body">
                    <div className="producer-name" style={{ color: 'var(--parchment)' }}>???</div>
                    <div className="producer-meta">
                      <span className="producer-bps">
                        unlocks at {window.beFmt(teaser.unlockAt)} baked
                      </span>
                    </div>
                    <div className="progress-rail" style={{ marginTop: 6, width: 140 }}>
                      <div
                        className="progress-fill"
                        style={{ width: `${Math.min(100, (state.totalEarned / teaser.unlockAt) * 100)}%` }}
                      />
                    </div>
                  </div>
                  <div className="producer-count">
                    <span style={{ fontSize: 18, opacity: 0.5 }}>🔒</span>
                  </div>
                </div>
              )}
            </>
          );
        })()}
      </div>
    </div>
  );
}

Object.assign(window, { PageStore });