// screen-rewards.jsx — Rewards marketplace + redemption flow.

const REWARDS = [
  { id: 'r1', cat: 'Bill credits', title: '$5 SP bill credit',  short: '$5 off bill',  cost: 500,  value: 'Apply directly to next month\'s bill', tone: 'primary', Icon: IcBolt },
  { id: 'r2', cat: 'Bill credits', title: '$15 SP bill credit', short: '$15 off bill', cost: 1400, value: 'Roughly half a month\'s aircon use',   tone: 'primary', Icon: IcBolt },
  { id: 'r3', cat: 'Vouchers',     title: 'NTUC FairPrice $10', short: '$10 groceries', cost: 950,  value: 'Groceries voucher, e-code by SMS',     tone: 'sand',    Icon: IcGift },
  { id: 'r4', cat: 'Vouchers',     title: 'Kopitiam Card $8',   short: '$8 kopi card', cost: 800,  value: 'Use at any Kopitiam outlet',           tone: 'sand',    Icon: IcGift },
  { id: 'r5', cat: 'Donations',    title: '5 meals · Food Bank', short: 'Give 5 meals', cost: 600,  value: 'We donate on your behalf',             tone: 'accent',  Icon: IcLeaf },
  { id: 'r6', cat: 'Donations',    title: 'Plant a tree · NParks', short: 'Plant a tree', cost: 1200, value: 'Annual reforestation effort',        tone: 'accent',  Icon: IcLeaf },
  { id: 'r7', cat: 'Streaks',      title: '30-day streak badge',  cost: 0,    value: 'Hit 30 missions to unlock',            tone: 'sky',     Icon: IcMedal, locked: true, progress: '14 / 30' },
];

function RewardsScreen({ c, points, redeeming, setRedeeming, doRedeem }) {
  const cats = ['Bill credits', 'Vouchers', 'Donations', 'Streaks'];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18, paddingBottom: 100 }}>
      <Header c={c} big title="Rewards" right={<button style={{ width: 36, height: 36, border: 'none', background: 'transparent', cursor: 'pointer' }}><IcClock size={20} color={c.textMuted} /></button>} />

      {/* POINTS HERO — calm, no gradient */}
      <div style={{ padding: '0 20px' }}>
        <Card c={c} style={{ padding: '20px 22px', display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ width: 56, height: 56, borderRadius: 16, background: c.primarySoft, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <IcCoins size={28} color={c.primary} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: c.textLight, letterSpacing: 0.4, textTransform: 'uppercase' }}>Your points</div>
            <div style={{ fontSize: 36, fontWeight: 700, color: c.text, letterSpacing: -0.8, fontVariantNumeric: 'tabular-nums', marginTop: 1, lineHeight: 1 }}>
              {points.toLocaleString()}
            </div>
            <div style={{ fontSize: 12.5, color: c.textMuted, marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
              <IcArrowU size={11} color={c.good} /><span style={{ color: c.good, fontWeight: 600 }}>+340</span> this week
            </div>
          </div>
        </Card>
      </div>

      {/* CATEGORY SECTIONS */}
      {cats.map(cat => {
        const items = REWARDS.filter(r => r.cat === cat);
        return (
          <div key={cat} style={{ padding: '0 20px' }}>
            <SectionHd c={c} title={cat} right={<span style={{ fontSize: 13, fontWeight: 500, color: c.textLight }}>{items.length} {items.length === 1 ? 'item' : 'items'}</span>} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 10 }}>
              {items.map(r => (
                <RewardCard key={r.id} c={c} r={r} affordable={points >= r.cost} onTap={() => !r.locked && points >= r.cost && setRedeeming(r)} />
              ))}
            </div>
          </div>
        );
      })}

      {/* REDEMPTION SHEET */}
      {redeeming && (
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(20,30,25,0.4)', zIndex: 100, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }} 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.22s 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' }}>
                  <div style={{ width: 64, height: 64, borderRadius: 32, background: c.primarySoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <IcCheck size={32} color={c.primary} />
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: c.text, letterSpacing: -0.3 }}>Redeemed</div>
                  <div style={{ fontSize: 14, color: c.textMuted, textAlign: 'center', maxWidth: 280, lineHeight: 1.5 }}>
                    Your <strong>{redeeming.title}</strong> is on the way. We'll text you within 24 hours.
                  </div>
                </div>
                <Btn kind="primary" size="lg" full c={c} onClick={() => setRedeeming(null)}>Done</Btn>
              </>
            ) : (
              <>
                <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: 22, fontWeight: 700, color: c.text, letterSpacing: -0.4 }}>{redeeming.title}</div>
                  <div style={{ fontSize: 14, color: c.textMuted, marginTop: 4, lineHeight: 1.5 }}>{redeeming.value}</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: 11, fontWeight: 600, color: c.textLight, letterSpacing: 0.3, textTransform: 'uppercase' }}>Cost</div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: c.text, fontVariantNumeric: 'tabular-nums', marginTop: 1 }}>{redeeming.cost.toLocaleString()} pts</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 11, fontWeight: 600, color: c.textLight, letterSpacing: 0.3, textTransform: 'uppercase' }}>After</div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: c.text, fontVariantNumeric: 'tabular-nums', marginTop: 1 }}>{(points - redeeming.cost).toLocaleString()} pts</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 redeem</Btn>
                </div>
              </>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

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];
  const dimmed = r.locked || !affordable;
  return (
    <button onClick={onTap} disabled={r.locked} style={{
      background: c.surface, border: `1px solid ${c.borderSoft}`, borderRadius: 16,
      padding: 14, fontFamily: 'inherit', textAlign: 'left',
      cursor: dimmed ? 'default' : 'pointer', display: 'flex', flexDirection: 'column', gap: 8,
      opacity: dimmed ? 0.55 : 1, minHeight: 156,
    }}>
      <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' }}>
        {r.locked ? (
          <Chip tone="neutral" size="sm" c={c} icon={<IcLock size={10} color={c.textMuted} />}>{r.progress}</Chip>
        ) : (
          <span style={{ fontSize: 13, fontWeight: 700, color: c.text, fontVariantNumeric: 'tabular-nums' }}>{r.cost.toLocaleString()} pts</span>
        )}
        {!r.locked && affordable && (
          <span style={{ fontSize: 11, fontWeight: 700, color: c.primary, letterSpacing: 0.3, textTransform: 'uppercase' }}>Redeem →</span>
        )}
      </div>
    </button>
  );
}

Object.assign(window, { RewardsScreen, REWARDS });