// brownie/page-upgrades.jsx — Page 3: upgrades list + achievements + prestige.

function PageUpgrades({ engine }) {
  const { state, buyUpgrade, prestige, hardReset, fudgeOnReset, bps, globalMult } = engine;
  const [tab, setTab] = React.useState('upgrades');

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

      <div className="page-header" style={{ paddingBottom: 0 }}>
        <h2>Mastery</h2>
        <div className="sub">Upgrades, awards, and prestige</div>
        <div className="crumbs-pill">
          <span className="dot" />
          {window.beFmt(Math.floor(state.crumbs))}
        </div>
        <div className="ups-tabs" style={{ marginTop: 12, padding: 0 }}>
          {[
            { id: 'upgrades', label: 'Upgrades' },
            { id: 'shop', label: 'Shop' },
            { id: 'achievements', label: 'Awards' },
            { id: 'prestige', label: 'Prestige' },
          ].map(t => (
            <div
              key={t.id}
              className={`ups-tab ${tab === t.id ? 'active' : ''}`}
              onClick={() => setTab(t.id)}
            >{t.label}</div>
          ))}
        </div>
      </div>

      <div className="ups-scroll">
        {tab === 'upgrades' && <UpgradesTab state={state} buyUpgrade={buyUpgrade} />}
        {tab === 'shop' && <ShopTab engine={engine} />}
        {tab === 'achievements' && <AchievementsTab state={state} bps={bps} globalMult={globalMult} />}
        {tab === 'prestige' && (
          <PrestigeTab
            state={state}
            fudgeOnReset={fudgeOnReset}
            prestige={prestige}
            hardReset={hardReset}
          />
        )}
      </div>
    </div>
  );
}

function UpgradesTab({ state, buyUpgrade }) {
  const visible = window.BE_UPGRADES.filter(u => {
    if (state.upgrades[u.id]) return true;
    if (u.unlockOwned) {
      return (state.producers[u.unlockOwned.pid] || 0) >= u.unlockOwned.n;
    }
    if (u.unlockEarned != null) {
      return state.totalEarned >= u.unlockEarned;
    }
    return false;
  });

  if (visible.length === 0) {
    return (
      <div style={{ textAlign: 'center', color: 'var(--parchment)', opacity: 0.55, marginTop: 60, fontSize: 13, padding: '0 30px', lineHeight: 1.6 }}>
        Buy producers and bake more crumbs to unlock upgrades.
      </div>
    );
  }

  // sort: affordable unowned first, then locked-by-price unowned, then bought
  const sorted = visible.slice().sort((a, b) => {
    const ab = !!state.upgrades[a.id], bb = !!state.upgrades[b.id];
    if (ab !== bb) return ab ? 1 : -1;
    const aa = !ab && state.crumbs >= a.price;
    const ba = !bb && state.crumbs >= b.price;
    if (aa !== ba) return aa ? -1 : 1;
    return a.price - b.price;
  });

  return (
    <div>
      {sorted.map(u => {
        const bought = !!state.upgrades[u.id];
        const affordable = !bought && state.crumbs >= u.price;
        const icon = u.unlockOwned
          ? window.BE_PRODUCER_ICONS[u.unlockOwned.pid]
          : (u.tapMult ? (
              <svg viewBox="0 0 24 24"><path d="M 4,3 L 4,18 L 9,14 L 12,21 L 15,19 L 12,13 L 18,12 Z"
                fill="#f6e9cf" stroke="#2a1408" strokeWidth="1.2" strokeLinejoin="round" /></svg>
            ) : (
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="#f2c879" stroke="#2a1408" strokeWidth="1.4"/>
                <path d="M 9 12 L 11 14 L 15 10" stroke="#2a1408" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            ));
        return (
          <div
            key={u.id}
            className={`ups-card ${bought ? 'bought' : affordable ? 'affordable' : 'locked'}`}
            onClick={() => affordable && buyUpgrade(u.id)}
          >
            <div className="ups-card-icon">{icon}</div>
            <div>
              <div className="ups-card-name">{u.name}</div>
              <div className="ups-card-desc">{u.desc}</div>
            </div>
            <div className="ups-card-price">
              {bought ? '✓' : window.beFmt(u.price)}
              <small>{bought ? 'owned' : 'crumbs'}</small>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function AchievementsTab({ state, bps, globalMult }) {
  const total = window.BE_ACHIEVEMENTS.length;
  const got = Object.keys(state.achievements).length;

  return (
    <div>
      <div className="stat-row"><span className="k">Total baked</span><span className="v">{window.beFmt(Math.floor(state.totalEarned))}</span></div>
      <div className="stat-row"><span className="k">Taps</span><span className="v">{window.beFmt(state.totalTaps)}</span></div>
      <div className="stat-row"><span className="k">Per second</span><span className="v">{window.beFmt(bps)}</span></div>
      <div className="stat-row"><span className="k">Global multiplier</span><span className="v">×{globalMult.toFixed(2)}</span></div>
      <div className="stat-row"><span className="k">Awards earned</span><span className="v">{got} / {total}</span></div>

      <div className="section-label">Awards · +1% production each</div>
      <div className="ach-grid">
        {window.BE_ACHIEVEMENTS.map(a => {
          const got = !!state.achievements[a.id];
          return (
            <div key={a.id} className={`ach-cell ${got ? 'got' : ''}`} title={`${a.name}\n${a.desc}`}>
              {got ? '★' : '·'}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Shop sub-tab: Daily Reward, Boost packs (Telegram Stars), Referral.
// ────────────────────────────────────────────────────────────────────────

const BOOST_PACKS = [
  { id: 'boost_2x_30m',  stars: 50,    label: '30 min',  sub: 'Quick boost'  },
  { id: 'boost_2x_4h',   stars: 250,   label: '4 hours', sub: 'Best value'   },
  { id: 'boost_2x_24h',  stars: 1000,  label: '24 hours',sub: 'Whole day'    },
];

function ShopTab({ engine }) {
  const { state } = engine;
  const { useState } = React;
  const [busy, setBusy] = useState(null);
  const [flash, setFlash] = useState(null);

  const flashMsg = (msg, kind = 'ok') => {
    setFlash({ msg, kind });
    setTimeout(() => setFlash(null), 2400);
  };

  const lastTs = state.lastDailyAt ? new Date(state.lastDailyAt).getTime() : 0;
  const hoursSince = (Date.now() - lastTs) / 3_600_000;
  const dailyReady = !lastTs || hoursSince >= 20;

  const handleDaily = async () => {
    if (!dailyReady) return;
    setBusy('daily');
    const r = await engine.claimDaily();
    setBusy(null);
    if (r?.error) flashMsg(r.error === 'ALREADY_CLAIMED' ? 'Come back tomorrow' : 'Claim failed', 'err');
    else flashMsg(`+${window.beFmt(r.reward)} crumbs · Day ${r.streak}`, 'ok');
  };

  const handleBoost = async (pack) => {
    setBusy(pack.id);
    const r = await engine.buyBoost(pack.id);
    setBusy(null);
    if (r.status === 'paid') flashMsg(`Boost activated · ${pack.label}`, 'ok');
    else if (r.status === 'unsupported') flashMsg('Open inside Telegram to pay', 'err');
    else if (r.status === 'cancelled') {} // silent
    else if (r.status === 'failed') flashMsg('Payment failed', 'err');
  };

  const refLink = state.referralCode
    ? `https://t.me/share/url?url=${encodeURIComponent(`https://t.me/?start=ref_${state.referralCode}`)}&text=${encodeURIComponent('Come bake brownies with me!')}`
    : null;

  const handleShare = () => {
    if (!refLink) return;
    if (window.Telegram?.WebApp?.openTelegramLink) {
      window.Telegram.WebApp.openTelegramLink(refLink);
    } else {
      window.open(refLink, '_blank');
    }
  };

  const handleCopy = () => {
    if (!state.referralCode) return;
    navigator.clipboard?.writeText(state.referralCode).then(() => flashMsg('Code copied', 'ok'));
  };

  return (
    <div className="shop-tab">
      {flash && (
        <div className={`shop-flash ${flash.kind === 'err' ? 'err' : ''}`}>{flash.msg}</div>
      )}

      {/* Daily Reward */}
      <div className="shop-section">
        <div className="shop-section-title">Daily Reward</div>
        <div className={`shop-card daily-card ${dailyReady ? 'ready' : ''}`}>
          <div className="shop-card-icon daily-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="12" cy="12" r="9" />
              <path d="M12 7 v5 l3 2" strokeLinecap="round" />
            </svg>
          </div>
          <div className="shop-card-body">
            <div className="shop-card-name">Day {(state.dailyStreak || 0) + (dailyReady ? 1 : 0)}</div>
            <div className="shop-card-meta">
              {dailyReady
                ? `Claim 5 min × ${1 + (state.dailyStreak || 0) * 0.25}× streak bonus`
                : `Streak: ${state.dailyStreak} · come back in ${Math.max(0, Math.ceil(20 - hoursSince))}h`}
            </div>
          </div>
          <button
            className="shop-cta"
            onClick={handleDaily}
            disabled={!dailyReady || busy === 'daily'}
          >
            {busy === 'daily' ? '...' : dailyReady ? 'Claim' : 'Claimed'}
          </button>
        </div>
      </div>

      {/* Boost packs */}
      <div className="shop-section">
        <div className="shop-section-title">2× Production Boost</div>
        <div className="shop-section-sub">Doubles all crumb production for the duration. Stacks with prestige and upgrades.</div>
        {BOOST_PACKS.map(pack => (
          <div key={pack.id} className="shop-card boost-card">
            <div className="shop-card-icon boost-icon">⚡</div>
            <div className="shop-card-body">
              <div className="shop-card-name">{pack.label}</div>
              <div className="shop-card-meta">{pack.sub}</div>
            </div>
            <button
              className="shop-cta stars"
              onClick={() => handleBoost(pack)}
              disabled={busy === pack.id}
            >
              {busy === pack.id ? '...' : <><span className="star">★</span> {pack.stars}</>}
            </button>
          </div>
        ))}
      </div>

      {/* Referral */}
      <div className="shop-section">
        <div className="shop-section-title">Invite friends</div>
        <div className="shop-section-sub">
          You and a friend each earn <b>1,000 crumbs</b>. You also get an extra <b>5,000</b> per friend who joins.
        </div>
        <div className="shop-card referral-card">
          <div className="referral-info">
            <div className="referral-label">Your code</div>
            <div className="referral-code" onClick={handleCopy}>
              {state.referralCode || '—'}
            </div>
            <div className="referral-stats">
              <b>{state.referralsCount || 0}</b> friend{(state.referralsCount || 0) === 1 ? '' : 's'} joined
            </div>
          </div>
          <div className="referral-buttons">
            <button className="shop-cta share" onClick={handleShare} disabled={!refLink}>Share link</button>
            <button className="shop-cta-ghost" onClick={handleCopy} disabled={!state.referralCode}>Copy</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function PrestigeTab({ state, fudgeOnReset, prestige, hardReset }) {
  return (
    <div>
      <div className="stat-row"><span className="k">Fudge Crumbs banked</span><span className="v">{state.fudge}</span></div>
      <div className="stat-row"><span className="k">Prestige bonus</span><span className="v">+{((state.fudge || 0) * 2).toFixed(0)}%</span></div>
      <div className="stat-row"><span className="k">Times prestiged</span><span className="v">{state.prestigeCount || 0}</span></div>

      <div className="prestige-card">
        <h3>Reset the Recipe</h3>
        <p>
          Start over to earn <b>{fudgeOnReset} Fudge Crumbs</b>. Each one adds +2% to all production permanently. Awards persist. Needs 1T total baked.
        </p>
        <button
          className="prestige-btn"
          onClick={prestige}
          disabled={fudgeOnReset <= 0}
        >
          {fudgeOnReset > 0 ? `Prestige for +${fudgeOnReset}` : 'Bake more to prestige'}
        </button>
      </div>

      <button className="hard-reset" onClick={hardReset}>Hard reset · wipe save</button>
    </div>
  );
}

Object.assign(window, { PageUpgrades });