/* Central Rewards Club — Promotions hub + detail. */

function Promos({ ctx }) {
  const C = ctx.C;
  const [cat, setCat] = React.useState('Semua');
  const [premOnly, setPremOnly] = React.useState(false);
  const list = C.promos.filter((p) => (cat === 'Semua' || p.cat === cat) && (!premOnly || p.premium));
  const accentMap = { Fashion: 'var(--crc-primary)', Beauty: 'var(--crc-coral)', Tech: 'var(--crc-info)', Experience: 'var(--crc-gold-deep)' };

  return (
    <div style={{ paddingBottom: 24 }}>
      <div style={{ padding: '60px 20px 12px' }}>
        <h1 style={{ margin: 0, fontSize: 23, fontWeight: 700 }}>Promo</h1>
        <p style={{ margin: '2px 0 0', fontSize: 13.5, color: 'var(--crc-ink-2)' }}>Penawaran spesial untukmu</p>
      </div>

      {/* All / Premium toggle */}
      <div style={{ padding: '4px 20px 0' }}>
        <div style={{ display: 'flex', background: '#fff', borderRadius: 14, padding: 4, boxShadow: 'inset 0 0 0 1px var(--crc-line)' }}>
          {[[false, 'Semua promo'], [true, 'Eksklusif Premium']].map(([v, l]) => (
            <button key={l} onClick={() => setPremOnly(v)} style={{ flex: 1, padding: '10px', borderRadius: 11, border: 'none', cursor: 'pointer', fontFamily: 'var(--crc-font)', fontWeight: 600, fontSize: 13.5, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, background: premOnly === v ? (v ? 'linear-gradient(135deg,var(--crc-gold),var(--crc-gold-deep))' : 'var(--crc-primary)') : 'transparent', color: premOnly === v ? (v ? '#3a2c0a' : '#fff') : 'var(--crc-ink-2)', transition: 'all .2s' }}>
              {v && <CRCIcon name="crown" size={15} />}{l}
            </button>
          ))}
        </div>
      </div>

      {/* Category chips */}
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '16px 20px 4px' }}>
        {C.promoCats.map((c) => <Chip key={c} label={c} active={cat === c} onClick={() => setCat(c)} />)}
      </div>

      {/* List */}
      <div style={{ padding: '12px 20px 0', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {list.length === 0 && <EmptyState icon="tag" title="Tidak ada promo" sub="Coba ubah filter atau kategori." />}
        {list.map((p) => {
          const locked = p.premium && tierRank(ctx.tier) < tierRank('gold');
          return (
            <div key={p.id} onClick={() => ctx.push('promoDetail', { id: p.id })} style={{ borderRadius: 18, overflow: 'hidden', background: '#fff', boxShadow: p.premium ? '0 8px 24px rgba(201,169,97,.22), inset 0 0 0 1.5px var(--crc-gold)' : 'var(--crc-sh-sm)', cursor: 'pointer' }}>
              <div style={{ position: 'relative', height: 158 }}>
                <Img slot={p.slot} placeholder="Gambar promo" radius={0} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))' }} />
                {p.premium && <span style={{ position: 'absolute', top: 12, left: 12, display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 999, background: 'linear-gradient(135deg,var(--crc-gold),var(--crc-gold-deep))', color: '#3a2c0a', fontSize: 11, fontWeight: 800, letterSpacing: '.03em' }}><CRCIcon name="crown" size={12} stroke={2.4} />EKSKLUSIF GOLD+</span>}
                {p.flash && <span style={{ position: 'absolute', top: 12, left: 12, display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 999, background: 'var(--crc-coral)', color: '#fff', fontSize: 11, fontWeight: 800 }}><CRCIcon name="flame" size={12} />FLASH SALE</span>}
                <span style={{ position: 'absolute', top: 12, right: 12, width: 34, height: 34, borderRadius: '50%', background: 'rgba(255,255,255,.92)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CRCIcon name="heart" size={18} color="var(--crc-ink-2)" /></span>
                <div style={{ position: 'absolute', left: 14, bottom: 12, color: '#fff' }}>
                  <div style={{ fontSize: 11.5, fontWeight: 600, opacity: .85 }}>{p.brand}</div>
                  <div style={{ fontSize: 17, fontWeight: 700, lineHeight: 1.2, marginTop: 2, textShadow: '0 1px 8px rgba(0,0,0,.4)' }}>{p.title}</div>
                </div>
              </div>
              <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 600, color: p.flash ? 'var(--crc-coral)' : 'var(--crc-ink-2)' }}><CRCIcon name="clock" size={15} />{p.ends}</span>
                {locked ? <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 700, color: 'var(--crc-gold-deep)' }}><CRCIcon name="lock" size={14} />Terkunci</span>
                  : <span style={{ display: 'flex', alignItems: 'center', gap: 3, fontSize: 13, fontWeight: 600, color: 'var(--crc-primary)' }}>Detail<CRCIcon name="chevR" size={15} /></span>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function PromoDetail({ ctx, params }) {
  const C = ctx.C;
  const p = C.promos.find((x) => x.id === params.id) || C.promos[0];
  const locked = p.premium && tierRank(ctx.tier) < tierRank('gold');
  const [saved, setSaved] = React.useState(ctx.actions.isSaved(p.id));
  return (
    <div style={{ paddingBottom: 110 }}>
      <div style={{ height: 300, position: 'relative' }}>
        <Img slot={p.slot} placeholder="Foto promo" radius={0} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 35%,rgba(0,0,0,.15))' }} />
        {p.premium && <span style={{ position: 'absolute', top: 16, left: 16, display: 'flex', alignItems: 'center', gap: 5, padding: '6px 12px', borderRadius: 999, background: 'linear-gradient(135deg,var(--crc-gold),var(--crc-gold-deep))', color: '#3a2c0a', fontSize: 11.5, fontWeight: 800 }}><CRCIcon name="crown" size={13} stroke={2.4} />EKSKLUSIF GOLD+</span>}
      </div>
      <div style={{ marginTop: -22, position: 'relative', background: 'var(--crc-bg)', borderRadius: '22px 22px 0 0', padding: '22px 20px 0' }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--crc-primary)', letterSpacing: '.03em' }}>{p.brand.toUpperCase()}</div>
        <h1 style={{ margin: '8px 0 6px', fontSize: 23, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.2 }}>{p.title}</h1>
        <div style={{ display: 'flex', gap: 16, color: 'var(--crc-ink-2)', fontSize: 13, marginTop: 10 }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><CRCIcon name="clock" size={16} color={p.flash ? 'var(--crc-coral)' : 'var(--crc-ink-2)'} />{p.ends}</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><CRCIcon name="pin" size={16} />Grand Indonesia</span>
        </div>
        <p style={{ margin: '18px 0 0', fontSize: 14, color: 'var(--crc-ink-2)', lineHeight: 1.6 }}>{p.desc}</p>

        {locked && (
          <div style={{ marginTop: 18, padding: '16px 18px', borderRadius: 16, background: 'linear-gradient(135deg,#fdf6e6,#f6ead0)', boxShadow: 'inset 0 0 0 1.5px var(--crc-gold)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontWeight: 700, fontSize: 14.5 }}><CRCIcon name="lock" size={18} color="var(--crc-gold-deep)" />Promo eksklusif member Gold+</div>
            <p style={{ margin: '6px 0 0', fontSize: 13, color: '#8a6d2e', lineHeight: 1.5 }}>Naik ke tier Gold untuk membuka penawaran ini & banyak perks premium lainnya.</p>
          </div>
        )}

        <div style={{ marginTop: 18 }}>
          <h3 style={{ margin: '0 0 8px', fontSize: 15, fontWeight: 700 }}>Cara pakai</h3>
          {['Tunjukkan halaman ini atau kode promo ke kasir', 'Berlaku selama periode promo di Central GI', 'Tidak dapat diuangkan'].map((t, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginBottom: 9, fontSize: 13.5, color: 'var(--crc-ink-2)' }}>
              <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--crc-primary-soft)', color: 'var(--crc-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12, flexShrink: 0 }}>{i + 1}</span>{t}
            </div>
          ))}
        </div>
      </div>

      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '14px 20px 26px', background: 'linear-gradient(180deg,transparent,var(--crc-bg) 24%)', display: 'flex', gap: 10 }}>
        <button onClick={() => setSaved(ctx.actions.toggleSave(p.id))} style={{ width: 54, borderRadius: 999, border: 'none', background: saved ? 'var(--crc-coral-soft)' : '#fff', boxShadow: saved ? 'none' : 'inset 0 0 0 1.5px var(--crc-line)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}>
          <CRCIcon name="heart" size={22} color={saved ? 'var(--crc-coral)' : 'var(--crc-ink-2)'} fill={saved ? 'var(--crc-coral)' : 'none'} />
        </button>
        {locked ? <CRCButton variant="gold" size="lg" icon="arrowUp" full onClick={() => ctx.toast('Lihat progres tier di Profil', 'info')}>Cara naik tier</CRCButton>
          : <CRCButton variant="primary" size="lg" icon="ticket" full onClick={() => ctx.openSheet(<PromoCode ctx={ctx} p={p} />)}>Pakai promo</CRCButton>}
      </div>
    </div>
  );
}

function PromoCode({ ctx, p }) {
  return (
    <div style={{ padding: '8px 24px 34px', textAlign: 'center' }}>
      <h2 style={{ margin: '4px 0 4px', fontSize: 19, fontWeight: 700 }}>Kode promo</h2>
      <p style={{ margin: '0 0 18px', fontSize: 13.5, color: 'var(--crc-ink-2)' }}>{p.title}</p>
      <div style={{ background: '#fff', borderRadius: 18, padding: 22, boxShadow: 'var(--crc-sh-sm)' }}>
        <QRBlock size={170} seed={p.id + 'promo'} />
        <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          <span style={{ letterSpacing: '.16em', fontWeight: 700, fontSize: 17, color: 'var(--crc-primary)' }}>CRC{p.id.toUpperCase()}20</span>
          <button onClick={() => ctx.toast('Kode disalin', 'success')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}><CRCIcon name="copy" size={18} color="var(--crc-ink-2)" /></button>
        </div>
      </div>
      <p style={{ margin: '16px 0 0', fontSize: 12.5, color: 'var(--crc-ink-2)' }}>Tunjukkan ke kasir Central · berlaku {p.ends}</p>
    </div>
  );
}

Object.assign(window, { Promos, PromoDetail, PromoCode });