/* global React, window */
// Pradnya Bali · screens.jsx — Home / Card / Activity / Rewards / Profile
const { Icon, MobileHeader, BottomTabs, Avatar, FakeQR, FakeBarcode, Sheet } = window.WFMobile;
const { member, tierPerks, promos, transactions, rewards, formatIDR } = window.PB;

function PBHeader({ title, sub, onBell }) {
  return (
    <MobileHeader
      title={title}
      sub={sub}
      right={
        <>
          <button className="wm-icon-btn" aria-label="Pesan"><Icon name="whatsapp" size={18}/></button>
          <button className="wm-icon-btn" style={{ position: 'relative' }} onClick={onBell} aria-label="Notifikasi">
            <Icon name="bell" size={18}/>
            <span className="wm-badge">3</span>
          </button>
        </>
      }
    />
  );
}

function MembershipCard({ tier = 'Silver', name, id, validUntil, compact = false }) {
  const tierClass = tier === 'Gold' ? 'gold' : tier === 'Platinum' ? 'platinum' : '';
  return (
    <div className="pb-card-wrap">
      <div className="pb-card" style={compact ? { aspectRatio: '2.2' } : null}>
        <div className="pb-card-top">
          <div className="pb-card-logo">
            <div className="pb-card-mark">P</div>
            <div className="pb-card-brand">PRADNYA BALI<small>MEMBER CLUB</small></div>
          </div>
          <div className={'pb-card-tier ' + tierClass}>
            <Icon name="starFill" size={11} color="currentColor" />
            {tier}
          </div>
        </div>
        <div>
          <div className="pb-card-chip" />
          <div className="pb-card-name">{name}</div>
          <div className="pb-card-row">
            <div>
              <div className="lbl">Member No.</div>
              <div className="val">{id}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="lbl">Berlaku Hingga</div>
              <div className="val">{validUntil}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function QuickActions({ onScan, onTopUp, onRefer, onHelp }) {
  return (
    <div className="pb-quick">
      <button className="qa" onClick={onScan}><span className="ico"><Icon name="scan" size={18}/></span>Scan</button>
      <button className="qa" onClick={onTopUp}><span className="ico"><Icon name="plus" size={18}/></span>Top-up</button>
      <button className="qa" onClick={onRefer}><span className="ico"><Icon name="share" size={18}/></span>Refer</button>
      <button className="qa" onClick={onHelp}><span className="ico"><Icon name="whatsapp" size={18}/></span>Bantuan</button>
    </div>
  );
}

function ScreenHome({ onCardTap }) {
  const m = member;
  const progress = Math.min(100, Math.round((m.points / m.nextTier.threshold) * 100));
  const remaining = m.nextTier.threshold - m.points;
  return (
    <>
      <div className="wm-stack-sm">
        <div className="wm-eyebrow">Selamat sore</div>
        <h1 className="wm-h1">{m.name.split(' ')[0]}, {m.tier} Member</h1>
        <div className="wm-muted" style={{ fontSize: 13 }}>Bali · 28°C · Cerah berawan</div>
      </div>

      <div onClick={onCardTap} style={{ cursor: 'pointer' }}>
        <MembershipCard tier={m.tier} name={m.name} id={m.id} validUntil={m.validUntil} />
      </div>

      <QuickActions onScan={onCardTap} onTopUp={()=>{}} onRefer={()=>{}} onHelp={()=>{}}/>

      <div className="wm-row">
        <div className="wm-kpi">
          <div className="wm-kpi-label">Poin</div>
          <div className="wm-kpi-value">{m.points}</div>
          <div className="wm-kpi-delta">+45 minggu ini</div>
        </div>
        <div className="wm-kpi">
          <div className="wm-kpi-label">Kunjungan</div>
          <div className="wm-kpi-value">{m.visitsThisMonth}</div>
          <div className="wm-kpi-delta">April</div>
        </div>
        <div className="wm-kpi">
          <div className="wm-kpi-label">Hemat YTD</div>
          <div className="wm-kpi-value" style={{ fontSize: 18 }}>Rp245k</div>
          <div className="wm-kpi-delta">vs non-member</div>
        </div>
      </div>

      <div className="pb-tier">
        <div className="pb-tier-head">
          <div className="pb-tier-from">{m.tier} → {m.nextTier.name}</div>
          <div className="pb-tier-to">{remaining} poin lagi</div>
        </div>
        <div className="wm-progress"><i style={{ width: progress + '%' }} /></div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11, color: 'var(--ink-500)' }}>
          <span>{m.points} pts</span>
          <span>{m.nextTier.threshold} pts</span>
        </div>
      </div>

      <div>
        <div className="wm-section"><h3>Promo Untuk Anda</h3><a>Semua →</a></div>
        <div className="pb-promos">
          {promos.map((p, i) => (
            <div key={i} className={'pb-promo ' + p.variant}>
              <div>
                <div className="badge">{p.tag}</div>
                <div className="title">{p.title}</div>
                <div className="sub">{p.sub}</div>
              </div>
              <button className="cta">{p.cta} →</button>
            </div>
          ))}
        </div>
      </div>

      <div>
        <div className="wm-section"><h3>Aktivitas Terbaru</h3><a>Semua →</a></div>
        <div className="wm-list">
          {transactions.slice(0, 3).map((tx) => (
            <div key={tx.id} className="wm-list-row">
              <div className="wm-list-icon"><Icon name={tx.kind === 'redeem' ? 'gift' : 'receipt'} size={18}/></div>
              <div className="wm-list-body">
                <div className="wm-list-title">{tx.store}</div>
                <div className="wm-list-sub">{tx.date} · {tx.time}{tx.items ? ' · ' + tx.items + ' item' : ''}</div>
              </div>
              <div className="wm-list-right" style={{ flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
                {tx.amount !== 0 ? <span style={{ color: 'var(--ink-900)', fontWeight: 500 }}>{formatIDR(tx.amount)}</span> : null}
                <span className={'wm-chip ' + (tx.points >= 0 ? 'brand' : '')} style={{ padding: '2px 8px', fontSize: 11 }}>
                  {tx.points >= 0 ? '+' : ''}{tx.points} pts
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function ScreenCard({ mode = 'qr', onMode }) {
  const m = member;
  return (
    <>
      <MembershipCard tier={m.tier} name={m.name} id={m.id} validUntil={m.validUntil} />

      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 4 }}>
        <div className="wm-seg">
          <button className={mode === 'qr' ? 'active' : ''} onClick={() => onMode('qr')}>QR Code</button>
          <button className={mode === 'bar' ? 'active' : ''} onClick={() => onMode('bar')}>Barcode</button>
        </div>
      </div>

      <div className="wm-card elevated" style={{ display: 'grid', placeItems: 'center', padding: 24 }}>
        {mode === 'qr' ? <FakeQR size={220}/> : <FakeBarcode width={260} height={90} value={m.id.replace(/-/g,'')}/>}
        <div className="wm-muted" style={{ fontSize: 12, marginTop: 12, textAlign: 'center' }}>
          Tunjukkan kepada kasir untuk validasi membership
        </div>
        <button className="wm-chip outline" style={{ marginTop: 10 }}>
          <Icon name="copy" size={12}/> Salin nomor member
        </button>
      </div>

      <div>
        <div className="wm-section"><h3>Manfaat Anda</h3></div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {tierPerks.Silver.map((p, i) => (
            <div key={i} className="wm-card" style={{ padding: 14 }}>
              <div className="wm-list-icon" style={{ background: 'var(--brand-50)', color: 'var(--brand-700)' }}>
                <Icon name={p.icon} size={18}/>
              </div>
              <div style={{ fontWeight: 600, fontSize: 13, marginTop: 8 }}>{p.title}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 4, lineHeight: 1.35 }}>{p.desc}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="wm-row">
        <button className="wm-btn dark full"><Icon name="wallet" size={16} color="#fff"/> Tambah ke Wallet</button>
        <button className="wm-icon-btn" style={{ width: 48, height: 48 }}><Icon name="share" size={18}/></button>
      </div>
    </>
  );
}

function ScreenActivity() {
  const filters = ['Semua', 'Pembelian', 'Poin Masuk', 'Reward'];
  const [active, setActive] = React.useState('Semua');
  const groups = transactions.reduce((acc, tx) => {
    if (!acc[tx.date]) acc[tx.date] = [];
    acc[tx.date].push(tx);
    return acc;
  }, {});
  return (
    <>
      <div className="wm-stack-sm">
        <h2 className="wm-h2">Aktivitas</h2>
        <div className="wm-muted" style={{ fontSize: 13 }}>Riwayat transaksi dan poin Anda</div>
      </div>

      <div className="wm-card flat" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'var(--ink-100)', border: 0 }}>
        <Icon name="search" size={16} color="#78716c"/>
        <span className="wm-muted" style={{ fontSize: 13 }}>Cari transaksi…</span>
      </div>

      <div className="wm-chips-scroll">
        {filters.map((f) => (
          <button key={f} className={'wm-chip ' + (active === f ? 'active' : 'outline')} onClick={() => setActive(f)}>{f}</button>
        ))}
      </div>

      {Object.entries(groups).map(([date, items]) => (
        <div key={date}>
          <div className="wm-section" style={{ padding: '8px 2px' }}><h3>{date}</h3></div>
          <div className="wm-list">
            {items.map((tx) => (
              <div key={tx.id} className="wm-list-row">
                <div className="wm-list-icon" style={{ background: tx.kind === 'redeem' ? 'var(--gold-100)' : 'var(--brand-50)', color: tx.kind === 'redeem' ? 'var(--gold-600)' : 'var(--brand-700)' }}>
                  <Icon name={tx.kind === 'redeem' ? 'gift' : tx.kind === 'reward' ? 'sparkle' : 'receipt'} size={18}/>
                </div>
                <div className="wm-list-body">
                  <div className="wm-list-title">{tx.store}</div>
                  <div className="wm-list-sub">{tx.time}{tx.note ? ' · ' + tx.note : tx.items ? ' · ' + tx.items + ' item' : ''}</div>
                </div>
                <div className="wm-list-right" style={{ flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
                  {tx.amount !== 0 ? <span style={{ color: 'var(--ink-900)', fontWeight: 500 }}>{formatIDR(tx.amount)}</span> : null}
                  <span className={'wm-chip ' + (tx.points >= 0 ? 'brand' : 'outline')} style={{ padding: '2px 8px', fontSize: 11 }}>
                    {tx.points >= 0 ? '+' : ''}{tx.points} pts
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </>
  );
}

function ScreenRewards({ onRedeem }) {
  const m = member;
  return (
    <>
      <div className="wm-stack-sm">
        <div className="wm-eyebrow">Poin Pradnya</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <div className="wm-num" style={{ fontSize: 56, lineHeight: 1 }}>{m.points}</div>
          <div className="wm-muted">poin</div>
        </div>
        <div className="wm-chip outline" style={{ alignSelf: 'flex-start' }}>
          <Icon name="flame" size={12} color="#b45309"/> {m.pointsExpiring.amount} poin kadaluarsa {m.pointsExpiring.date}
        </div>
      </div>

      <div className="pb-tier">
        <div className="pb-tier-head">
          <div className="pb-tier-from">{m.tier} → {m.nextTier.name}</div>
          <div className="pb-tier-to">{m.nextTier.threshold - m.points} poin lagi</div>
        </div>
        <div className="wm-progress"><i style={{ width: Math.round(m.points / m.nextTier.threshold * 100) + '%' }} /></div>
        <div style={{ marginTop: 10, fontSize: 12, color: 'var(--ink-600)' }}>
          Buka tier <b>Gold</b> untuk diskon 15%, free shipping, dan akses eksklusif workshop.
        </div>
      </div>

      <div>
        <div className="wm-section"><h3>Tukar Poin</h3><a>Semua →</a></div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {rewards.map((r) => {
            const locked = r.cost > m.points;
            return (
              <div key={r.id} className={'pb-reward ' + (locked ? 'locked' : '')}>
                <div className="pb-reward-img">
                  <Icon name={r.kind === 'voucher' ? 'gift' : r.kind === 'experience' ? 'sparkle' : 'star'} size={36}/>
                </div>
                <div className="pb-reward-body">
                  <div className="pb-reward-title">{r.title}</div>
                  <div className={'pb-reward-pts ' + (locked ? 'locked' : '')}>{r.cost.toLocaleString('id-ID')} poin</div>
                  <button className={'wm-btn sm ' + (locked ? 'ghost' : 'brand')} disabled={locked} onClick={() => onRedeem(r)}>
                    {locked ? 'Kurang ' + (r.cost - m.points) + ' pts' : 'Tukar'}
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

function ScreenProfile() {
  const m = member;
  return (
    <>
      <div className="pb-profile-hero">
        <Avatar name={m.name} size="lg" tone="linear-gradient(135deg,#e81c21,#7a0d10)"/>
        <div className="name">{m.name}</div>
        <div className="meta">
          <span className="wm-chip gold"><Icon name="starFill" size={11}/> {m.tier}</span>
          <span>·</span>
          <span>{m.id}</span>
        </div>
        <div className="wm-muted" style={{ fontSize: 12 }}>Member sejak {m.since}</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
        <div className="pb-quick" style={{ display: 'contents' }}>
          <button className="qa"><span className="ico"><Icon name="user" size={16}/></span>Edit</button>
          <button className="qa"><span className="ico"><Icon name="mapPin" size={16}/></span>Alamat</button>
          <button className="qa"><span className="ico"><Icon name="bell" size={16}/></span>Notif</button>
          <button className="qa"><span className="ico"><Icon name="globe" size={16}/></span>Bahasa</button>
        </div>
      </div>

      <div>
        <div className="wm-section"><h3>Membership</h3></div>
        <div className="wm-list">
          {[
            { icon: 'wallet',   t: 'Kartu Fisik',          s: 'Pesan kartu cetak premium' },
            { icon: 'history',  t: 'Riwayat Tier',         s: 'Silver sejak Mar 2024' },
            { icon: 'share',    t: 'Kode Referral',        s: 'PUTU2024 · 3 teman tergabung' },
          ].map((r) => (
            <div key={r.t} className="wm-list-row">
              <div className="wm-list-icon"><Icon name={r.icon} size={18}/></div>
              <div className="wm-list-body">
                <div className="wm-list-title">{r.t}</div>
                <div className="wm-list-sub">{r.s}</div>
              </div>
              <div className="wm-list-right"><Icon name="chevron" size={16}/></div>
            </div>
          ))}
        </div>
      </div>

      <div>
        <div className="wm-section"><h3>Akun & Keamanan</h3></div>
        <div className="wm-list">
          {[
            { icon: 'shield',  t: 'Privasi & Keamanan' },
            { icon: 'lock',    t: 'Ubah Kata Sandi' },
            { icon: 'globe',   t: 'Bahasa', r: 'Bahasa Indonesia' },
          ].map((r) => (
            <div key={r.t} className="wm-list-row">
              <div className="wm-list-icon"><Icon name={r.icon} size={18}/></div>
              <div className="wm-list-body"><div className="wm-list-title">{r.t}</div></div>
              <div className="wm-list-right">{r.r || null}<Icon name="chevron" size={16}/></div>
            </div>
          ))}
        </div>
      </div>

      <div>
        <div className="wm-section"><h3>Bantuan</h3></div>
        <div className="wm-list">
          <div className="wm-list-row">
            <div className="wm-list-icon" style={{ background: '#dcfce7', color: '#15803d' }}><Icon name="whatsapp" size={18}/></div>
            <div className="wm-list-body"><div className="wm-list-title">Hubungi via WhatsApp</div><div className="wm-list-sub">Senin–Sabtu · 09.00–18.00 WITA</div></div>
            <div className="wm-list-right"><Icon name="chevron" size={16}/></div>
          </div>
          <div className="wm-list-row">
            <div className="wm-list-icon"><Icon name="receipt" size={18}/></div>
            <div className="wm-list-body"><div className="wm-list-title">FAQ & Bantuan</div></div>
            <div className="wm-list-right"><Icon name="chevron" size={16}/></div>
          </div>
        </div>
      </div>

      <button className="wm-btn outline full" style={{ color: 'var(--danger)', borderColor: 'var(--ink-200)' }}>
        <Icon name="logout" size={16} color="currentColor"/> Keluar
      </button>

      <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--ink-400)', marginTop: 4 }}>
        Pradnya Bali Membership · v1.0.0
      </div>
    </>
  );
}

window.PBScreens = { PBHeader, ScreenHome, ScreenCard, ScreenActivity, ScreenRewards, ScreenProfile };