/* Central Rewards Club — Home dashboard + Membership card. */

// Reusable premium tier card visual
function MemberCard({ ctx, compact }) {
  const T = ctx.tierObj, C = ctx.C;
  const lightInk = ctx.tier === 'gold' || ctx.tier === 'platinum';
  const ink = lightInk ? '#3a2c0a' : '#fff';
  const sub = lightInk ? 'rgba(58,44,10,.7)' : 'rgba(255,255,255,.72)';
  return (
    <div style={{ position: 'relative', borderRadius: 22, overflow: 'hidden', background: T.card, padding: compact ? '18px 20px' : '22px 22px 20px', boxShadow: '0 18px 40px rgba(0,0,0,.22)', color: ink }}>
      <div style={{ position: 'absolute', right: -30, top: -30, width: 160, height: 160, borderRadius: '50%', background: 'rgba(255,255,255,.12)' }} />
      <div style={{ position: 'absolute', right: 24, bottom: -40, width: 120, height: 120, borderRadius: '50%', background: 'rgba(255,255,255,.08)' }} />
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <CRCIcon name="crown" size={16} color={ink} stroke={2.4} />
            <span style={{ fontWeight: 700, fontSize: 13, letterSpacing: '.06em' }}>{T.name.toUpperCase()}</span>
          </div>
          <div style={{ fontSize: 11.5, color: sub, marginTop: 3, fontWeight: 600, letterSpacing: '.03em' }}>CENTRAL REWARDS CLUB</div>
        </div>
        <span style={{ fontWeight: 800, fontSize: 13, padding: '3px 9px', borderRadius: 999, background: lightInk ? 'rgba(58,44,10,.12)' : 'rgba(255,255,255,.18)' }}>{T.mult} POIN</span>
      </div>
      <div style={{ position: 'relative', marginTop: compact ? 18 : 30 }}>
        <div style={{ fontSize: 11.5, color: sub, fontWeight: 600, letterSpacing: '.04em' }}>POIN AKTIF</div>
        <div className="crc-display" style={{ fontSize: 36, fontWeight: 800, lineHeight: 1, marginTop: 2 }}>{ctx.fmt.pts(ctx.points)}</div>
      </div>
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: compact ? 14 : 18 }}>
        <div>
          <div style={{ fontSize: 10.5, color: sub, fontWeight: 600, letterSpacing: '.06em' }}>NO. ANGGOTA</div>
          <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '.08em', marginTop: 2 }}>{ctx.member.memberId}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 10.5, color: sub, fontWeight: 600, letterSpacing: '.06em' }}>NAMA</div>
          <div style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>{ctx.member.name}</div>
        </div>
      </div>
    </div>
  );
}

function CardSheet({ ctx }) {
  const T = ctx.tierObj;
  return (
    <div style={{ padding: '8px 20px 30px', display: 'flex', flexDirection: 'column', alignItems: 'center', overflow: 'auto' }}>
      <h2 style={{ margin: '4px 0 4px', fontSize: 19, fontWeight: 700 }}>Kartu Digital</h2>
      <p style={{ margin: '0 0 18px', fontSize: 13.5, color: 'var(--crc-ink-2)', textAlign: 'center' }}>Tunjukkan ke kasir untuk scan & kumpulkan poin</p>
      <div style={{ width: '100%' }}><MemberCard ctx={ctx} /></div>
      <div style={{ marginTop: 20, background: '#fff', borderRadius: 20, padding: 22, boxShadow: 'var(--crc-sh-sm)', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <QRBlock size={186} seed={ctx.member.memberId} />
        <div style={{ marginTop: 14, letterSpacing: '.34em', fontWeight: 700, fontSize: 15, color: 'var(--crc-ink)' }}>{ctx.member.memberId}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 16, color: 'var(--crc-ink-2)', fontSize: 12.5 }}>
        <CRCIcon name="refresh" size={15} color="var(--crc-success)" /> Berlaku offline · diperbarui otomatis
      </div>
    </div>
  );
}

function QuickAction({ icon, label, onClick, tint }) {
  return (
    <button onClick={onClick} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'var(--crc-font)' }}>
      <span style={{ width: 56, height: 56, borderRadius: 18, background: tint.bg, color: tint.fg, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--crc-sh-sm)' }}>
        <CRCIcon name={icon} size={23} stroke={2.1} />
      </span>
      <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--crc-ink)' }}>{label}</span>
    </button>
  );
}

function Home({ ctx }) {
  const C = ctx.C, T = ctx.tierObj;
  const toNext = T.nextSpend ? Math.max(0, T.nextSpend - ctx.member.ytdSpend) : 0;
  const pct = T.nextSpend ? (ctx.member.ytdSpend / T.nextSpend) * 100 : 100;
  const accentBg = { coral: 'var(--crc-coral)', gold: 'var(--crc-gold-deep)', primary: 'var(--crc-primary)' };

  return (
    <div style={{ paddingBottom: 28 }}>
      {/* Header */}
      <div style={{ padding: '60px 20px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
          <div style={{ width: 44, height: 44, borderRadius: '50%', overflow: 'hidden', boxShadow: '0 0 0 2px var(--crc-tier)' }}>
            <Img slot="avatar" placeholder="Foto" radius={22} />
          </div>
          <div>
            <div style={{ fontSize: 12.5, color: 'var(--crc-ink-2)', fontWeight: 500, whiteSpace: 'nowrap' }}>Selamat datang,</div>
            <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>{ctx.member.first} 👋</div>
          </div>
        </div>
        <button onClick={() => ctx.push('notifications')} style={{ position: 'relative', width: 44, height: 44, borderRadius: 14, border: 'none', background: '#fff', boxShadow: 'var(--crc-sh-sm)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
          <CRCIcon name="bell" size={21} />
          {ctx.actions.unreadCount() > 0 && <span style={{ position: 'absolute', top: 11, right: 12, width: 8, height: 8, borderRadius: '50%', background: 'var(--crc-coral)', boxShadow: '0 0 0 2px #fff' }} />}
        </button>
      </div>

      {/* Hero card */}
      <div style={{ padding: '4px 20px 0' }}>
        <div onClick={() => ctx.openSheet(<CardSheet ctx={ctx} />)} style={{ cursor: 'pointer' }}>
          <MemberCard ctx={ctx} compact />
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
          <CRCButton variant="dark" size="md" icon="qr" full onClick={() => ctx.openSheet(<CardSheet ctx={ctx} />)}>Kartu & QR</CRCButton>
          <CRCButton variant="secondary" size="md" icon="scan" full onClick={() => ctx.setTab('earn')}>Scan struk</CRCButton>
        </div>
      </div>

      {/* Tier progress */}
      {T.next && (
        <div style={{ padding: '18px 20px 0' }}>
          <Surface pad={16}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <CRCIcon name="arrowUp" size={17} color="var(--crc-tier-deep)" />
                <span style={{ fontWeight: 700, fontSize: 14 }}>Menuju {C.TIERS[T.next].name}</span>
              </div>
              <span style={{ fontSize: 12, color: 'var(--crc-ink-2)', fontWeight: 600 }}>{Math.round(pct)}%</span>
            </div>
            <ProgressBar value={pct} />
            <div style={{ marginTop: 10, fontSize: 13, color: 'var(--crc-ink-2)' }}>Belanja <b style={{ color: 'var(--crc-ink)' }}>{ctx.fmt.idr(toNext)}</b> lagi untuk naik tier & buka perks eksklusif.</div>
          </Surface>
        </div>
      )}

      {/* Quick actions */}
      <div style={{ padding: '22px 16px 0', display: 'flex', gap: 4 }}>
        <QuickAction icon="scan" label="Scan" onClick={() => ctx.setTab('earn')} tint={{ bg: 'var(--crc-primary-soft)', fg: 'var(--crc-primary)' }} />
        <QuickAction icon="gift" label="Tukar" onClick={() => ctx.setTab('rewards')} tint={{ bg: 'var(--crc-gold-soft)', fg: 'var(--crc-gold-deep)' }} />
        <QuickAction icon="tag" label="Promo" onClick={() => ctx.setTab('promos')} tint={{ bg: 'var(--crc-coral-soft)', fg: 'var(--crc-coral)' }} />
        <QuickAction icon="sparkle" label="Misi" onClick={() => ctx.push('social')} tint={{ bg: '#EAF1FB', fg: 'var(--crc-info)' }} />
      </div>

      {/* Featured promotions carousel */}
      <div style={{ padding: '26px 0 0' }}>
        <div style={{ padding: '0 20px' }}><SectionHead title="Untukmu" action="Lihat semua" onAction={() => ctx.setTab('promos')} /></div>
        <div style={{ display: 'flex', gap: 14, overflowX: 'auto', padding: '0 20px 6px', scrollSnapType: 'x mandatory' }}>
          {C.featured.map((f) => (
            <div key={f.id} onClick={() => ctx.push('promoDetail', { id: f.id.replace('f', 'p') })} style={{ flex: '0 0 264px', scrollSnapAlign: 'start', borderRadius: 18, overflow: 'hidden', background: '#fff', boxShadow: 'var(--crc-sh-sm)', cursor: 'pointer' }}>
              <div style={{ position: 'relative', height: 130 }}>
                <Img slot={f.slot} placeholder="Gambar promo" radius={0} />
                <span style={{ position: 'absolute', top: 12, left: 12, padding: '4px 10px', borderRadius: 999, background: accentBg[f.accent], color: '#fff', fontSize: 11, fontWeight: 700, letterSpacing: '.04em' }}>{f.tag}</span>
                {f.premium && <span style={{ position: 'absolute', top: 12, right: 12, display: 'flex', alignItems: 'center', gap: 4, padding: '4px 9px', borderRadius: 999, background: 'rgba(0,0,0,.55)', color: 'var(--crc-gold)', fontSize: 11, fontWeight: 700 }}><CRCIcon name="lock" size={11} />EKSKLUSIF</span>}
              </div>
              <div style={{ padding: '13px 15px 16px' }}>
                <div style={{ fontWeight: 700, fontSize: 14.5, lineHeight: 1.3 }}>{f.title}</div>
                <div style={{ fontSize: 12.5, color: 'var(--crc-ink-2)', marginTop: 3 }}>{f.sub}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 10, fontSize: 12, color: 'var(--crc-coral)', fontWeight: 600 }}>
                  <CRCIcon name="clock" size={14} />{f.ends}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Missions preview */}
      <div style={{ padding: '24px 20px 0' }}>
        <SectionHead title="Kumpulkan poin" action="Semua misi" onAction={() => ctx.push('social')} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {C.missions.slice(0, 3).map((m) => (
            <Surface key={m.id} pad={14} onClick={() => ctx.push('social')} style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
              <span style={{ width: 44, height: 44, borderRadius: 13, background: m.kind === 'social' ? 'var(--crc-coral-soft)' : 'var(--crc-primary-soft)', color: m.kind === 'social' ? 'var(--crc-coral)' : 'var(--crc-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <CRCIcon name={m.icon} size={21} stroke={2} />
              </span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{m.title}</div>
                <div style={{ fontSize: 12.5, color: 'var(--crc-ink-2)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.sub}</div>
              </div>
              <span style={{ display: 'flex', alignItems: 'center', gap: 3, color: 'var(--crc-gold-deep)', fontWeight: 700, fontSize: 13, flexShrink: 0 }}>+{m.points}</span>
            </Surface>
          ))}
        </div>
      </div>

      {/* Recommendations */}
      <div style={{ padding: '24px 20px 0' }}>
        <SectionHead title="Rekomendasi untukmu" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {C.rewards.slice(0, 2).map((r) => (
            <div key={r.id} onClick={() => ctx.push('rewardDetail', { id: r.id })} style={{ borderRadius: 16, overflow: 'hidden', background: '#fff', boxShadow: 'var(--crc-sh-sm)', cursor: 'pointer' }}>
              <div style={{ height: 104 }}><Img slot={r.slot} placeholder="Produk" radius={0} /></div>
              <div style={{ padding: '11px 12px 13px' }}>
                <div style={{ fontWeight: 600, fontSize: 13, lineHeight: 1.3, minHeight: 34 }}>{r.name}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 6, color: 'var(--crc-gold-deep)', fontWeight: 700, fontSize: 13 }}><CRCIcon name="sparkle" size={14} />{ctx.fmt.pts(r.cost)}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Home, MemberCard, CardSheet });