// screen-play.jsx — Merged Missions + Rewards.
// Top half: today's quests + weekly. Bottom half: redeem zone.
// Single scrolling tab — earn at top, spend at bottom.

function PlayScreen({ c, missions, completeMission, streak, points, redeeming, setRedeeming, doRedeem }) {
  const today = missions.filter(m => m.cadence === 'today');
  const weekly = missions.filter(m => m.cadence === 'weekly');
  const doneToday = today.filter(m => m.state === 'done').length;
  const pointsAnim = useCountUp(points, { duration: 600 });

  // Top reward suggestions: 4 most affordable, sorted by cost.
  const featuredRewards = [...REWARDS]
    .filter(r => !r.locked)
    .sort((a, b) => a.cost - b.cost)
    .slice(0, 4);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18, paddingBottom: 100 }}>

      {/* HERO — points + streak */}
      <div style={{ padding: '14px 20px 0' }}>
        <Card c={c} kind="highlighted" style={{ padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 16 }}>
          <Watt size={56} color={c.primary} bg="#fff" mood="cheer" anim="bounce" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: c.primaryDk, letterSpacing: 0.4, textTransform: 'uppercase' }}>Your points</div>
            <div style={{ fontSize: 32, fontWeight: 700, color: c.text, letterSpacing: -0.8, fontVariantNumeric: 'tabular-nums', lineHeight: 1, marginTop: 2 }}>
              {pointsAnim.toLocaleString()}
            </div>
            <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 9px', borderRadius: 999, background: '#fff' }}>
                <IcMedal size={13} color={c.primary} />
                <span style={{ fontSize: 12, fontWeight: 700, color: c.primaryDk }}>{streak}</span>
                <span style={{ fontSize: 12, fontWeight: 500, color: c.primaryDk, opacity: 0.7 }}>day streak</span>
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* TODAY'S QUESTS — visual tiles, tap to complete */}
      <div style={{ padding: '0 20px' }}>
        <PlaySectionHd c={c} title="Today" sub={<ProgressDots c={c} done={doneToday} total={today.length} />} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 10 }}>
          {today.map(m => <QuestTile key={m.id} c={c} m={m} onComplete={() => completeMission(m.id)} wide={today.length === 1} />)}
        </div>
      </div>

      {/* THIS WEEK */}
      <div style={{ padding: '0 20px' }}>
        <PlaySectionHd c={c} title="This week" sub="Resets Sun" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 10 }}>
          {weekly.map(m => <QuestTile key={m.id} c={c} m={m} onComplete={() => completeMission(m.id)} wide={weekly.length === 1} />)}
        </div>
      </div>

      {/* DIVIDER */}
      <div style={{ padding: '12px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ flex: 1, height: 1, background: c.borderSoft }} />
          <span style={{ fontSize: 11, fontWeight: 700, color: c.textLight, letterSpacing: 0.6, textTransform: 'uppercase' }}>Spend points</span>
          <div style={{ flex: 1, height: 1, background: c.borderSoft }} />
        </div>
      </div>

      {/* FEATURED REWARDS — visual tiles */}
      <div style={{ padding: '0 20px' }}>
        <PlaySectionHd c={c} title="For you" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 10 }}>
          {featuredRewards.map(r => (
            <RewardTile key={r.id} c={c} r={r} affordable={points >= r.cost} onTap={() => points >= r.cost && setRedeeming(r)} />
          ))}
        </div>
      </div>

      {/* CATEGORIES — icon chips */}
      <div style={{ padding: '0 20px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {[
            { cat: 'Credits',  Icon: IcBolt,  tone: c.primary, bg: c.primarySoft },
            { cat: 'Vouchers', Icon: IcGift,  tone: '#5A4A22', bg: c.sand },
            { cat: 'Donate',   Icon: IcLeaf,  tone: '#8A5A1E', bg: c.accentSoft },
            { cat: 'Badges',   Icon: IcMedal, tone: '#345070', bg: c.skySoft },
          ].map(row => (
            <button key={row.cat} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
              padding: '12px 4px 10px', border: `1px solid ${c.borderSoft}`, background: c.surface,
              borderRadius: 14, cursor: 'pointer', fontFamily: 'inherit',
              WebkitTapHighlightColor: 'transparent',
            }}>
              <div style={{ width: 38, height: 38, borderRadius: 12, background: row.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <row.Icon size={20} color={row.tone} />
              </div>
              <div style={{ fontSize: 11.5, fontWeight: 700, color: c.text }}>{row.cat}</div>
            </button>
          ))}
        </div>
      </div>

      {/* REDEMPTION SHEET — copied from old rewards screen */}
      {redeeming && (
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(20,30,25,0.4)', zIndex: 100, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', animation: 'm-fadeup .2s ease' }}
             onClick={() => setRedeeming(null)}>
          <div onClick={(e) => e.stopPropagation()} style={{
            width: '100%', background: c.surface, borderRadius: '24px 24px 0 0',
            padding: '24px 24px 32px', display: 'flex', flexDirection: 'column', gap: 16,
            animation: 'sh-slideup 0.24s ease',
          }}>
            <div style={{ width: 36, height: 4, background: c.border, borderRadius: 2, alignSelf: 'center' }} />
            {redeeming.confirmed ? (
              <>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 12, padding: '12px 0 4px' }}>
                  <Watt size={80} color={c.primary} bg={c.primarySoft} mood="cheer" anim="bounce" />
                  <div style={{ fontSize: 22, fontWeight: 700, color: c.text, letterSpacing: -0.4 }}>Redeemed!</div>
                  <div style={{ fontSize: 13, color: c.textMuted, textAlign: 'center' }}>We'll text you within 24 hours.</div>
                </div>
                <Btn kind="primary" size="lg" full c={c} onClick={() => setRedeeming(null)}>Done</Btn>
              </>
            ) : (
              <>
                <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                  <div style={{ width: 56, height: 56, borderRadius: 16, background: c.primarySoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <redeeming.Icon size={28} color={c.primary} />
                  </div>
                  <div>
                    <div style={{ fontSize: 20, fontWeight: 700, color: c.text, letterSpacing: -0.3 }}>{redeeming.title}</div>
                    <div style={{ fontSize: 13, color: c.textMuted, marginTop: 2 }}>{redeeming.value}</div>
                  </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0', borderTop: `1px solid ${c.borderSoft}`, borderBottom: `1px solid ${c.borderSoft}` }}>
                  <div>
                    <div style={{ fontSize: 10.5, fontWeight: 700, color: c.textLight, letterSpacing: 0.4, textTransform: 'uppercase' }}>Cost</div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: c.text, fontVariantNumeric: 'tabular-nums', marginTop: 2 }}>{redeeming.cost.toLocaleString()}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 10.5, fontWeight: 700, color: c.textLight, letterSpacing: 0.4, textTransform: 'uppercase' }}>After</div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: c.text, fontVariantNumeric: 'tabular-nums', marginTop: 2 }}>{(points - redeeming.cost).toLocaleString()}</div>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 10 }}>
                  <Btn kind="secondary" size="lg" c={c} onClick={() => setRedeeming(null)}>Cancel</Btn>
                  <Btn kind="primary" size="lg" full c={c} onClick={doRedeem}>Confirm</Btn>
                </div>
              </>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

function PlaySectionHd({ c, title, sub }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ fontSize: 17, fontWeight: 700, color: c.text, letterSpacing: -0.3 }}>{title}</div>
      {sub && <div style={{ fontSize: 12, fontWeight: 500, color: c.textLight, display: 'flex', alignItems: 'center' }}>{sub}</div>}
    </div>
  );
}

// ProgressDots — ●●○ progress, no words
function ProgressDots({ c, done, total }) {
  return (
    <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{
          width: 9, height: 9, borderRadius: 999,
          background: i < done ? c.primary : 'transparent',
          border: `2px solid ${i < done ? c.primary : c.border}`,
        }}></div>
      ))}
    </div>
  );
}

// RewardTile — visual, centered: icon, 2-word name, coin cost. Tap to redeem.
function RewardTile({ c, r, affordable, onTap }) {
  const tones = {
    primary: { bg: c.primarySoft, fg: c.primary },
    sand:    { bg: c.sand, fg: '#5A4A22' },
    accent:  { bg: c.accentSoft, fg: '#8A5A1E' },
    sky:     { bg: c.skySoft, fg: '#345070' },
  }[r.tone];
  return (
    <button onClick={onTap} disabled={!affordable}
      style={{
        background: c.surface, border: `1.5px solid ${c.borderSoft}`, borderRadius: 16,
        padding: '13px 12px', fontFamily: 'inherit', textAlign: 'center',
        cursor: affordable ? 'pointer' : 'default',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
        opacity: affordable ? 1 : 0.5,
        WebkitTapHighlightColor: 'transparent',
      }}>
      <div style={{ width: 46, height: 46, borderRadius: 14, background: tones.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <r.Icon size={26} color={tones.fg} />
      </div>
      <div style={{ fontSize: 14, fontWeight: 700, color: c.text, lineHeight: 1.15, letterSpacing: -0.2 }}>{r.short || r.title}</div>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 12.5, fontWeight: 800, color: affordable ? c.primaryDk : c.textLight, fontVariantNumeric: 'tabular-nums' }}>
        <IcCoins size={12} color={affordable ? c.primary : c.textLight} />{r.cost.toLocaleString()}
      </span>
    </button>
  );
}

function RewardCard({ c, r, affordable, onTap }) {
  const tones = {
    primary: { bg: c.primarySoft, fg: c.primary },
    sand:    { bg: c.sand, fg: '#5A4A22' },
    accent:  { bg: c.accentSoft, fg: '#8A5A1E' },
    sky:     { bg: c.skySoft, fg: '#345070' },
  }[r.tone];
  return (
    <button onClick={onTap} disabled={!affordable}
      style={{
        background: c.surface, border: `1px solid ${c.borderSoft}`, borderRadius: 16,
        padding: 14, fontFamily: 'inherit', textAlign: 'left',
        cursor: affordable ? 'pointer' : 'default',
        display: 'flex', flexDirection: 'column', gap: 8,
        opacity: affordable ? 1 : 0.55, minHeight: 124,
      }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: tones.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <r.Icon size={20} color={tones.fg} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: c.text, lineHeight: 1.25 }}>{r.title}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontSize: 13, fontWeight: 700, color: c.text, fontVariantNumeric: 'tabular-nums' }}>{r.cost.toLocaleString()} pts</span>
        {affordable && <IcArrowR size={14} color={c.primary} />}
      </div>
    </button>
  );
}

Object.assign(window, { PlayScreen, RewardCard, RewardTile });