// screens-system.jsx — Group 7: System States (3 screens)

/* ── Screen 23: Verification Required (mid-session) ── */
function VerificationScreen({ navigate, goBack }) {
  const [uploaded, setUploaded] = React.useState(false);
  const steps = [
    { label:'Upload your ID (passport, driving licence or national ID)', done:false, active:true },
    { label:'Upload a proof of address (dated within 3 months)', done:false, active:false },
    { label:'VantageBet review — usually 2–5 minutes', done:false, active:false },
  ];
  return (
    <React.Fragment>
      <BackHeader title="Verification Required" onBack={goBack} />
      <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)', padding:'20px 16px' }}>

        {/* Why banner */}
        <div style={{ background:'rgba(91,138,245,0.08)', border:'1px solid rgba(91,138,245,0.25)', borderRadius:14, padding:'14px', marginBottom:20, display:'flex', gap:12, alignItems:'flex-start' }}>
          <i className="ph ph-info" style={{ fontSize:20, color:'var(--color-primary)', flexShrink:0, marginTop:2 }} />
          <div>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-primary)', marginBottom:5 }}>Why is this needed?</div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-secondary)', lineHeight:1.5 }}>
              Regulations require us to verify your identity before processing withdrawals over €2,000 or when your cumulative deposits exceed €10,000.   This is a 1-time process.
            </div>
          </div>
        </div>

        {/* Steps */}
        <div style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:0.5, marginBottom:10 }}>What to upload</div>
        <div style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'8px 0', marginBottom:20 }}>
          {steps.map((step, i) => (
            <div key={i} style={{ display:'flex', gap:12, padding:'12px 16px', borderBottom:i<steps.length-1?'1px solid var(--color-border-subtle)':undefined, alignItems:'flex-start' }}>
              <div style={{ width:28, height:28, borderRadius:'50%', background:step.done?'var(--color-success)':step.active?'rgba(91,138,245,0.15)':'var(--color-border)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:2 }}>
                {step.done
                  ? <i className="ph ph-check" style={{ fontSize:14, color:'#fff' }} />
                  : <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:12, color:step.active?'var(--color-primary)':'var(--color-text-muted)' }}>{i+1}</span>}
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:step.active?'var(--color-text-primary)':'var(--color-text-muted)', lineHeight:1.4 }}>{step.label}</div>
                {step.active && (
                  <div style={{ marginTop:8 }}>
                    <div onClick={() => setUploaded(true)} style={{ height:80, borderRadius:10, border:'1.5px dashed var(--color-border)', background:uploaded?'rgba(39,196,132,0.08)':'var(--color-bg)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', gap:8, transition:'all 0.15s' }}>
                      {uploaded
                        ? <React.Fragment>
                            <i className="ph ph-check-circle" style={{ fontSize:22, color:'var(--color-success)' }} />
                            <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-success)', fontWeight:500 }}>File uploaded</span>
                          </React.Fragment>
                        : <React.Fragment>
                            <i className="ph ph-upload-simple" style={{ fontSize:22, color:'var(--color-text-muted)' }} />
                            <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-muted)' }}>Tap to upload file</span>
                          </React.Fragment>}
                    </div>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* ETA */}
        <div style={{ display:'flex', gap:10, alignItems:'center', padding:'12px 14px', background:'var(--color-surface)', borderRadius:12, border:'1px solid var(--color-border)', marginBottom:20 }}>
          <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)' }}>Review ETA: 2–5 minutes</div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)' }}>You'll receive an email when complete</div>
          </div>
        </div>
        <div style={{ height:16 }} />
      </div>
      <div style={{ padding:'12px 16px 24px', background:'var(--color-nav-bg)', borderTop:'1px solid var(--color-border)' }}>
        <button onClick={() => navigate('kyc-pending')} style={{ width:'100%', height:52, borderRadius:12, background:uploaded?'var(--color-primary)':'var(--color-border)', border:'none', cursor:uploaded?'pointer':'default', fontFamily:'var(--font-body)', fontSize:15, fontWeight:600, color:uploaded?'#fff':'var(--color-text-muted)' }}>
          {uploaded ? 'Submit for review' : 'Upload documents to continue'}
        </button>
      </div>
    </React.Fragment>
  );
}

/* ── Screen 24: Account Blocked / Excluded ── */
function AccountBlockedScreen({ navigate }) {
  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:80, height:80, borderRadius:24, background:'var(--color-surface)', border:'1px solid var(--color-border)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:24 }}>
          <i className="ph ph-prohibit" style={{ fontSize:38, color:'var(--color-text-muted)' }} />
        </div>
        <h2 style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:22, color:'var(--color-text-primary)', marginBottom:10 }}>Your account is excluded</h2>
        <p style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--color-text-secondary)', lineHeight:1.6, marginBottom:8 }}>
          Your self-exclusion is active until <strong style={{ color:'var(--color-text-primary)' }}>June 8, 2026</strong>.
        </p>
        <p style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-secondary)', lineHeight:1.6, marginBottom:32 }}>
          During this period you cannot log in, place bets, or make deposits. Any pending withdrawals will be processed to your registered payment method.
        </p>

        {/* Support links */}
        <div style={{ width:'100%', background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'8px 0', marginBottom:24 }}>
          {[
            { name:'GamCare', sub:'Free counselling & support', url:'gamcare.org.uk' },
            { name:'BeGambleAware', sub:'Information & resources', url:'begambleaware.org' },
            { name:'Gamblers Anonymous', sub:'Support groups worldwide', url:'gamblersanonymous.org.uk' },
          ].map((org, i) => (
            <div key={org.name} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 16px', borderBottom:i<2?'1px solid var(--color-border-subtle)':undefined }}>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:'var(--font-body)', fontSize:13, fontWeight:500, color:'var(--color-text-primary)' }}>{org.name}</div>
                <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)' }}>{org.sub}</div>
              </div>
              <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-primary)', fontWeight:500 }}>Visit →</span>
            </div>
          ))}
        </div>

        <div style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-muted)', lineHeight:1.6 }}>
          To contact us about your exclusion, email <span style={{ color:'var(--color-primary)' }}>support@vantagebet.com</span>
        </div>
      </div>
    </div>
  );
}

/* ── Screen 25: Empty States (design reference) ── */
function EmptyStatesScreen({ navigate, goBack }) {
  const states = [
    { icon:'ph-receipt', title:'No open bets', body:'You haven\'t placed any bets yet. Browse sports events to get started.', cta:'Browse sports', dest:'sports' },
    { icon:'ph-heart', title:'No favourites', body:'Save games you love by tapping the heart icon on any game tile.', cta:'Explore casino', dest:'casino' },
    { icon:'ph-clock-clockwise', title:'No transactions', body:'Your deposit and withdrawal history will appear here once you\'ve made a transaction.', cta:'Make a deposit', dest:'deposit' },
    { icon:'ph-gift', title:'No active bonuses', body:'Check the Promotions section for available offers you can opt into.', cta:'View promotions', dest:'bonuses' },
  ];

  return (
    <React.Fragment>
      <BackHeader title="Empty States Reference" onBack={goBack} />
      <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)' }}>
        <div style={{ padding:'12px 16px 6px' }}>
          <div style={{ background:'rgba(91,138,245,0.08)', border:'1px solid rgba(91,138,245,0.2)', borderRadius:10, padding:'10px 12px', marginBottom:4 }}>
            <span style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-primary)' }}>Design reference — shows all empty state patterns used across the app.</span>
          </div>
        </div>
        {states.map((s, i) => (
          <div key={s.title}>
            <div style={{ padding:'4px 16px' }}>
              <div style={{ fontFamily:'var(--font-body)', fontSize:10, fontWeight:600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:0.5, marginBottom:4 }}>Empty state {i+1}</div>
            </div>
            <div style={{ margin:'0 16px 12px', background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', overflow:'hidden' }}>
              <EmptyState
                icon={s.icon}
                title={s.title}
                body={s.body}
                cta={s.cta}
                onCta={() => navigate(s.dest)}
              />
            </div>
          </div>
        ))}
        <div style={{ height:24 }} />
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { VerificationScreen, AccountBlockedScreen, EmptyStatesScreen });