// screens-wallet.jsx — Group 4: Wallet & Payments (4 screens)

/* ── Screen 13: Deposit ── */
function DepositScreen({ navigate, goBack }) {
  const [amount, setAmount] = React.useState('50');
  const [method, setMethod] = React.useState(1);
  const amtNum = parseFloat(amount) || 0;
  const quickAmts = [10, 20, 50, 100];
  const remaining = 500 - 320; // weekly limit remaining

  return (
    <React.Fragment>
      <BackHeader title="Add Funds" onBack={goBack} />
      <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)', padding:'16px' }}>

        {/* Limit indicator */}
        <div style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'12px 14px', marginBottom:16 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:6 }}>
            <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-muted)' }}>Weekly limit remaining</span>
            <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:13, color:'var(--color-text-primary)' }}>€{remaining} of €500</span>
          </div>
          <LimitBar pct={64} />
        </div>

        {/* Amount input */}
        <div style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'16px', marginBottom:16 }}>
          <label style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:0.5, display:'block', marginBottom:10 }}>Amount</label>
          <div style={{ height:64, borderRadius:12, background:'var(--color-bg)', border:'1.5px solid var(--color-primary)', display:'flex', alignItems:'center', padding:'0 16px', gap:8, marginBottom:12 }}>
            <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:24, color:'var(--color-text-muted)' }}>€</span>
            <input value={amount} onChange={e => setAmount(e.target.value.replace(/[^0-9.]/g,''))} style={{ flex:1, background:'none', border:'none', outline:'none', fontFamily:'var(--font-display)', fontWeight:700, fontSize:32, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }} />
          </div>
          <div style={{ display:'flex', gap:8 }}>
            {quickAmts.map(a => (
              <button key={a} onClick={() => setAmount(String(a))} style={{ flex:1, height:38, borderRadius:9, background:parseFloat(amount)===a?'var(--color-primary)':'var(--color-surface-raised)', border:`1px solid ${parseFloat(amount)===a?'var(--color-primary)':'var(--color-border)'}`, cursor:'pointer', fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:parseFloat(amount)===a?'#fff':'var(--color-text-secondary)' }}>€{a}</button>
            ))}
          </div>
        </div>

        {/* Payment methods */}
        <div style={{ marginBottom:16 }}>
          <div style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:0.5, marginBottom:10 }}>Payment method</div>
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {PAYMENT_METHODS.map(pm => (
              <div key={pm.id} onClick={() => setMethod(pm.id)} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 14px', borderRadius:12, background:'var(--color-surface)', border:`1.5px solid ${method===pm.id?'var(--color-primary)':'var(--color-border)'}`, cursor:'pointer', transition:'border-color 0.15s' }}>
                <div style={{ width:36, height:36, borderRadius:9, background:method===pm.id?'var(--color-primary)20':'var(--color-bg)', display:'flex', alignItems:'center', justifyContent:'center', border:'1px solid var(--color-border)' }}>
                  <i className={`ph ${pm.icon}`} style={{ fontSize:18, color:method===pm.id?'var(--color-primary)':'var(--color-text-muted)' }} />
                </div>
                <div style={{ flex:1 }}>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:13, fontWeight:500, color:'var(--color-text-primary)' }}>{pm.name}</div>
                  {pm.lastUsed && <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-success)' }}>✓ Last used</div>}
                </div>
                <div style={{ width:20, height:20, borderRadius:'50%', border:`2px solid ${method===pm.id?'var(--color-primary)':'var(--color-border)'}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
                  {method===pm.id && <div style={{ width:10, height:10, borderRadius:'50%', background:'var(--color-primary)' }} />}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* RG nudge */}
        <div style={{ background:'var(--color-rg-bg)', borderLeft:'3px solid var(--color-warning)', border:'1px solid rgba(245,160,58,0.28)', borderRadius:12, padding:'12px 14px', display:'flex', gap:10, alignItems:'flex-start', marginBottom:16 }}>
          <i className="ph ph-shield-check" style={{ fontSize:18, color:'var(--color-warning)', marginTop:1 }} />
          <div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:'var(--color-text-primary)', marginBottom:3 }}>Set a deposit limit</div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-secondary)', marginBottom:6 }}>Stay in control by setting a weekly limit on how much you deposit.</div>
            <button onClick={() => navigate('set-limit')} style={{ background:'none', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:'var(--color-warning)', padding:0 }}>Set now →</button>
          </div>
        </div>
        <div style={{ height:20 }} />
      </div>
      <div style={{ padding:'12px 16px 24px', background:'var(--color-nav-bg)', borderTop:'1px solid var(--color-border)' }}>
        <button onClick={() => navigate(amtNum > 0 && amtNum <= remaining ? 'deposit-success' : 'deposit-failure', { amount:amtNum })}
          style={{ width:'100%', height:52, borderRadius:12, background:amtNum>0?'var(--color-primary)':'var(--color-border)', border:'none', cursor:amtNum>0?'pointer':'default', fontFamily:'var(--font-body)', fontSize:15, fontWeight:600, color:amtNum>0?'#fff':'var(--color-text-muted)' }}>
          {amtNum > 0 ? `Deposit €${amtNum.toFixed(2)}` : 'Enter an amount'}
        </button>
        <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)', textAlign:'center', marginTop:8 }}>Funds available instantly · Encrypted & secure</div>
      </div>
    </React.Fragment>
  );
}

/* ── Screen 14: Deposit Success ── */
function DepositSuccessScreen({ navigate, amount }) {
  const amt = amount || 50;
  const newBalance = (USER.realBalance + amt).toFixed(2);
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'var(--color-bg)' }}>
      <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'32px 24px', textAlign:'center' }}>
        <div style={{ width:88, height:88, borderRadius:'50%', background:'rgba(39,196,132,0.15)', border:'2px solid var(--color-success)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:20 }}>
          <i className="ph ph-check" style={{ fontSize:44, color:'var(--color-success)' }} />
        </div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:'var(--color-success)', textTransform:'uppercase', letterSpacing:1, marginBottom:8 }}>Deposit successful</div>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:42, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums', marginBottom:6 }}>€{parseFloat(amt).toFixed(2)}</div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--color-text-secondary)', marginBottom:28 }}>added to your real-money balance</div>
        <div style={{ width:'100%', background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'14px', marginBottom:20 }}>
          {[['New balance',`€${newBalance}`],['Method',PAYMENT_METHODS[0].name],['Reference','DEP-'+Date.now().toString().slice(-8)],['Time','Just now']].map(([k,v]) => (
            <div key={k} style={{ display:'flex', justifyContent:'space-between', padding:'8px 0', borderBottom:'1px solid var(--color-border-subtle)' }}>
              <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-muted)' }}>{k}</span>
              <span style={{ fontFamily:k==='New balance'?'var(--font-display)':'var(--font-body)', fontWeight:k==='New balance'?700:500, fontSize:13, color:k==='New balance'?'var(--color-success)':'var(--color-text-primary)' }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding:'12px 24px 32px', display:'flex', flexDirection:'column', gap:10 }}>
        <button onClick={() => navigate('casino')} style={{ width:'100%', height:50, borderRadius:12, background:'var(--color-primary)', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:14, fontWeight:600, color:'#fff' }}>Go to Casino</button>
        <button onClick={() => navigate('sports')} style={{ width:'100%', height:50, borderRadius:12, background:'var(--color-surface)', border:'1px solid var(--color-border)', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:14, fontWeight:500, color:'var(--color-text-primary)' }}>Start betting</button>
      </div>
    </div>
  );
}

/* ── Screen 15: Deposit Failure ── */
function DepositFailureScreen({ navigate, goBack }) {
  return (
    <React.Fragment>
      <BackHeader title="Add Funds" onBack={goBack} />
      <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)', padding:'24px 16px' }}>
        <div style={{ display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', marginBottom:28 }}>
          <div style={{ width:72, height:72, borderRadius:'50%', background:'rgba(239,91,91,0.1)', border:'1.5px solid rgba(239,91,91,0.3)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16 }}>
            <i className="ph ph-credit-card" style={{ fontSize:32, color:'var(--color-danger)' }} />
          </div>
          <h2 style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:20, color:'var(--color-text-primary)', marginBottom:8 }}>Your card was declined</h2>
          <p style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-secondary)', lineHeight:1.6 }}>
            Your bank didn't authorise this payment. This can happen if your daily card limit has been reached or if the payment looks unusual to your bank.
          </p>
        </div>

        {/* What to try */}
        <div style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'14px', marginBottom:16 }}>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-primary)', marginBottom:12 }}>What you can try</div>
          {['Check your card has enough available balance','Contact your bank to authorise the payment','Try a smaller amount (e.g. €10)'].map((tip, i) => (
            <div key={i} style={{ display:'flex', gap:10, alignItems:'flex-start', marginBottom:10 }}>
              <div style={{ width:22, height:22, borderRadius:6, background:'var(--color-bg)', border:'1px solid var(--color-border)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:1 }}>
                <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, color:'var(--color-primary)' }}>{i+1}</span>
              </div>
              <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-secondary)', lineHeight:1.5 }}>{tip}</span>
            </div>
          ))}
        </div>

        {/* Alternative methods */}
        <div style={{ marginBottom:16 }}>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-primary)', marginBottom:10 }}>Try a different method</div>
          {[{name:'Skrill', icon:'ph-wallet', sub:'Instant — no card needed'},{name:'Neteller', icon:'ph-wallet', sub:'Instant e-wallet deposit'},{name:'Bank Transfer', icon:'ph-bank', sub:'1–3 business days'}].map(pm => (
            <div key={pm.name} onClick={() => navigate('deposit')} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 14px', borderRadius:12, background:'var(--color-surface)', border:'1px solid var(--color-border)', cursor:'pointer', marginBottom:8 }}>
              <div style={{ width:36, height:36, borderRadius:9, background:'var(--color-bg)', display:'flex', alignItems:'center', justifyContent:'center', border:'1px solid var(--color-border)' }}>
                <i className={`ph ${pm.icon}`} style={{ fontSize:18, color:'var(--color-text-muted)' }} />
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:'var(--font-body)', fontSize:13, fontWeight:500, color:'var(--color-text-primary)' }}>{pm.name}</div>
                <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)' }}>{pm.sub}</div>
              </div>
              <i className="ph ph-caret-right" style={{ fontSize:14, color:'var(--color-text-muted)' }} />
            </div>
          ))}
        </div>
        <div style={{ textAlign:'center' }}>
          <button onClick={goBack} style={{ background:'none', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-primary)', fontWeight:500 }}>Retry same card</button>
        </div>
        <div style={{ height:20 }} />
      </div>
    </React.Fragment>
  );
}

/* ── Screen 16: Withdrawal ── */
function WithdrawalScreen({ navigate, goBack }) {
  const [amount, setAmount] = React.useState('100');
  const amtNum = parseFloat(amount) || 0;
  const pending = 0;
  return (
    <React.Fragment>
      <BackHeader title="Withdraw Funds" onBack={goBack} />
      <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)', padding:'16px' }}>

        {/* Balance breakdown */}
        <div style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'16px', marginBottom:16 }}>
          <div style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:0.5, marginBottom:12 }}>Balance breakdown</div>
          {[
            { label:'Real money', amount:USER.realBalance, color:'var(--color-success)', icon:'ph-check-circle', withdrawable:true },
            { label:'Bonus funds', amount:USER.bonusBalance, color:'var(--color-warning)', icon:'ph-gift', withdrawable:false },
            { label:'Locked', amount:USER.lockedBalance, color:'var(--color-text-muted)', icon:'ph-lock', withdrawable:false },
          ].map(b => (
            <div key={b.label} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'8px 0', borderBottom:'1px solid var(--color-border-subtle)' }}>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                <i className={`ph ${b.icon}`} style={{ fontSize:15, color:b.color }} />
                <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-primary)' }}>{b.label}</span>
                {!b.withdrawable && <span style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)', background:'var(--color-bg)', borderRadius:4, padding:'1px 5px' }}>Not withdrawable</span>}
              </div>
              <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:b.color, fontVariantNumeric:'tabular-nums' }}>€{b.amount.toFixed(2)}</span>
            </div>
          ))}
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:10, marginTop:4 }}>
            <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-primary)' }}>Available to withdraw</span>
            <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:18, color:'var(--color-success)', fontVariantNumeric:'tabular-nums' }}>€{USER.realBalance.toFixed(2)}</span>
          </div>
        </div>

        {/* Amount */}
        <div style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'16px', marginBottom:16 }}>
          <label style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:0.5, display:'block', marginBottom:10 }}>Amount to withdraw</label>
          <div style={{ height:60, borderRadius:12, background:'var(--color-bg)', border:'1.5px solid var(--color-primary)', display:'flex', alignItems:'center', padding:'0 16px', gap:8, marginBottom:12 }}>
            <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:22, color:'var(--color-text-muted)' }}>€</span>
            <input value={amount} onChange={e => setAmount(e.target.value.replace(/[^0-9.]/g,''))} style={{ flex:1, background:'none', border:'none', outline:'none', fontFamily:'var(--font-display)', fontWeight:700, fontSize:28, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }} />
          </div>
          <div style={{ display:'flex', gap:8 }}>
            {[50,100,250,500].map(a => (
              <button key={a} onClick={() => setAmount(String(a))} style={{ flex:1, height:36, borderRadius:9, background:parseFloat(amount)===a?'var(--color-primary)':'var(--color-surface-raised)', border:`1px solid ${parseFloat(amount)===a?'var(--color-primary)':'var(--color-border)'}`, cursor:'pointer', fontFamily:'var(--font-display)', fontWeight:600, fontSize:13, color:parseFloat(amount)===a?'#fff':'var(--color-text-secondary)' }}>€{a}</button>
            ))}
          </div>
        </div>

        {/* ETA */}
        <div style={{ background:'var(--color-surface)', borderRadius:12, border:'1px solid var(--color-border)', padding:'12px 14px', marginBottom:16, display:'flex', gap:10, alignItems:'center' }}>
          <i className="ph ph-clock" style={{ fontSize:18, color:'var(--color-primary)' }} />
          <div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:'var(--color-text-primary)' }}>Expected within 24 hours</div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)' }}>Visa ••• 4242 · Funds return to your card</div>
          </div>
        </div>
        {pending > 0 && (
          <div style={{ background:'var(--color-surface)', borderRadius:12, border:'1px solid rgba(245,160,58,0.3)', borderLeft:'3px solid var(--color-warning)', padding:'12px 14px', marginBottom:16 }}>
            <div style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-primary)' }}>You have a pending withdrawal of <strong>€{pending}</strong></div>
          </div>
        )}
        <div style={{ height:20 }} />
      </div>
      <div style={{ padding:'12px 16px 24px', background:'var(--color-nav-bg)', borderTop:'1px solid var(--color-border)' }}>
        <button onClick={goBack} style={{ width:'100%', height:52, borderRadius:12, background:amtNum>0&&amtNum<=USER.realBalance?'var(--color-primary)':'var(--color-border)', border:'none', cursor:amtNum>0?'pointer':'default', fontFamily:'var(--font-body)', fontSize:15, fontWeight:600, color:amtNum>0?'#fff':'var(--color-text-muted)' }}>
          {amtNum > 0 ? `Withdraw €${amtNum.toFixed(2)}` : 'Enter an amount'}
        </button>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { DepositScreen, DepositSuccessScreen, DepositFailureScreen, WithdrawalScreen });