/* Lunch & Fees — balance, add funds, auto-reload, fees, transactions */
function WalletScreen({ onNav, onBack }) {
  const [balance, setBalance] = React.useState(12.40);
  const [autoReload, setAutoReload] = React.useState(true);
  const [sheet, setSheet] = React.useState(false);
  const [amt, setAmt] = React.useState(25);
  const [fees, setFees] = React.useState([
    { id:1, title:'6th Grade Field Trip', sub:'Houston Museum · Due Jun 10', amount:15.00, icon:'bus', tint:'var(--gold-100)', ic:'var(--gold-600)' },
    { id:2, title:'Art Supplies Fee',      sub:'Spring semester · Due Jun 15', amount:8.50, icon:'palette', tint:'var(--danger-100)', ic:'var(--danger-500)' },
  ]);
  const [txns, setTxns] = React.useState([
    { t:'Cafeteria — Lunch', d:'Today · 11:48 AM', a:-3.25 },
    { t:'Cafeteria — Milk',  d:'Today · 11:48 AM', a:-0.75 },
    { t:'Funds added',       d:'May 28 · Auto-reload', a:25.00 },
    { t:'Cafeteria — Lunch', d:'May 28 · 11:51 AM', a:-3.25 },
  ]);
  const AMTS = [10, 25, 50, 100];
  const money = (n) => (n<0?'-$':'$') + Math.abs(n).toFixed(2);
  const addFunds = () => {
    setBalance(b => b + amt);
    setTxns(t => [{ t:'Funds added', d:'Just now · Visa ••4821', a:amt }, ...t]);
    setSheet(false);
    jlToast(money(amt) + ' added to lunch account', { icon:'wallet' });
  };
  const payFee = (f) => {
    setFees(fs => fs.filter(x => x.id !== f.id));
    setTxns(t => [{ t:f.title, d:'Just now · Visa ••4821', a:-f.amount }, ...t]);
    jlToast(f.title + ' paid · ' + money(f.amount), { icon:'check-check' });
  };
  const low = balance < 10;

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar title="Lunch & Fees" onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>

        {/* balance hero */}
        <div style={{ background:'var(--grad-hero)', borderRadius:18, padding:'18px', color:'#fff', boxShadow:'var(--shadow-navy)' }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
            <div style={{ fontSize:10, fontWeight:800, letterSpacing:'.1em', color:'rgba(255,255,255,.7)' }}>LUNCH ACCOUNT · EJ HATTEN</div>
            <Icon name="utensils" size={20} color="var(--gold-400)" />
          </div>
          <div style={{ fontSize:44, fontWeight:800, letterSpacing:'-.02em', lineHeight:1, margin:'8px 0 4px', fontFamily:'var(--font-mono)' }}>${balance.toFixed(2)}</div>
          {low
            ? <Pill bg="rgba(229,72,77,.25)" fg="#fff"><Icon name="alert-triangle" size={13} color="#fff" />Low balance</Pill>
            : <div style={{ fontSize:12.5, color:'rgba(255,255,255,.75)' }}>About 3 days of meals remaining</div>}
          <button onClick={()=>setSheet(true)} style={{ width:'100%', marginTop:15, display:'flex', alignItems:'center', justifyContent:'center', gap:8, whiteSpace:'nowrap', background:'var(--gold-400)', color:'var(--on-gold)', border:0, borderRadius:12, padding:'13px', fontWeight:800, fontSize:14.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>
            <Icon name="plus" size={18} color="var(--on-gold)" />Add Funds
          </button>
        </div>

        {/* auto-reload */}
        <div style={{ display:'flex', alignItems:'center', gap:12, marginTop:14, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'14px 15px', boxShadow:'var(--shadow-sm)' }}>
          <span style={{ width:38, height:38, borderRadius:10, background:'var(--success-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="refresh-cw" size={18} color="var(--success-500)" /></span>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>Auto-reload</div>
            <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>Add $25 when balance drops below $10</div>
          </div>
          <button onClick={()=>{ setAutoReload(v=>!v); jlToast('Auto-reload ' + (!autoReload?'on':'off'), { icon: !autoReload?'check':'x', color: !autoReload?'#FCC13E':'#E5484D' }); }} style={{ width:48, height:28, borderRadius:'999px', border:0, cursor:'pointer', padding:2, background: autoReload?'var(--success-500)':'var(--gray-300)', transition:'.18s', flex:'0 0 auto', display:'flex', justifyContent: autoReload?'flex-end':'flex-start' }}>
            <span style={{ width:24, height:24, borderRadius:'999px', background:'#fff', display:'block', boxShadow:'0 1px 3px rgba(0,0,0,.2)' }} />
          </button>
        </div>

        {/* outstanding fees */}
        <SectionLabel>Outstanding Fees</SectionLabel>
        {fees.length === 0 ? (
          <div style={{ display:'flex', alignItems:'center', gap:11, background:'var(--success-100)', borderRadius:14, padding:'15px 16px' }}>
            <Icon name="circle-check-big" size={20} color="var(--success-500)" />
            <span style={{ fontSize:14, fontWeight:700, color:'var(--success-600)' }}>All fees paid — you're all caught up</span>
          </div>
        ) : (
          <div style={{ display:'flex', flexDirection:'column', gap:11 }}>
            {fees.map(f => (
              <div key={f.id} style={{ display:'flex', alignItems:'center', gap:13, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'13px 14px', boxShadow:'var(--shadow-sm)' }}>
                <span style={{ width:40, height:40, borderRadius:11, background:f.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
                  <Icon name={f.icon} size={19} color={f.ic} />
                </span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{f.title}</div>
                  <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{f.sub}</div>
                </div>
                <button onClick={()=>payFee(f)} style={{ background:'var(--navy-600)', color:'#fff', border:0, borderRadius:10, padding:'9px 14px', fontWeight:700, fontSize:13.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>${f.amount.toFixed(2)}</button>
              </div>
            ))}
          </div>
        )}

        {/* transactions */}
        <SectionLabel>Recent Activity</SectionLabel>
        <div style={cardWrap}>
          {txns.map((x,i) => (
            <React.Fragment key={i}>
              {i>0 && <Divider />}
              <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
                <span style={{ width:34, height:34, borderRadius:9, background: x.a>0?'var(--success-100)':'var(--gray-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
                  <Icon name={x.a>0?'arrow-down-left':'utensils'} size={16} color={x.a>0?'var(--success-500)':'var(--gray-500)'} />
                </span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:14, fontWeight:700, color:'var(--ink)' }}>{x.t}</div>
                  <div style={{ fontSize:12, color:'var(--gray-500)' }}>{x.d}</div>
                </div>
                <div style={{ fontSize:14.5, fontWeight:800, color: x.a>0?'var(--success-600)':'var(--ink)', fontFamily:'var(--font-mono)' }}>{money(x.a)}</div>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* add funds sheet */}
      {sheet && (
        <div onClick={()=>setSheet(false)} style={{ position:'absolute', inset:0, zIndex:60, background:'rgba(10,20,40,.4)', display:'flex', alignItems:'flex-end' }}>
          <div onClick={e=>e.stopPropagation()} style={{ width:'100%', background:'#fff', borderRadius:'22px 22px 0 0', padding:'10px 18px 32px' }}>
            <div style={{ width:40, height:4, borderRadius:'999px', background:'var(--gray-300)', margin:'0 auto 16px' }} />
            <div style={{ fontSize:18, fontWeight:800, color:'var(--ink)', marginBottom:4 }}>Add Funds</div>
            <div style={{ fontSize:13, color:'var(--gray-500)', marginBottom:16 }}>To EJ's lunch account</div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:16 }}>
              {AMTS.map(a => {
                const on = amt===a;
                return (
                  <button key={a} onClick={()=>setAmt(a)} style={{
                    padding:'16px 0', borderRadius:13, cursor:'pointer', fontFamily:'var(--font-sans)',
                    fontSize:20, fontWeight:800, fontFamily:'var(--font-mono)',
                    border: on?'1.5px solid var(--blue-500)':'1px solid var(--gray-200)',
                    background: on?'var(--blue-100)':'#fff', color: on?'var(--blue-700)':'var(--ink)',
                  }}>${a}</button>
                );
              })}
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:10, background:'var(--gray-50)', borderRadius:12, padding:'12px 14px', marginBottom:16 }}>
              <Icon name="credit-card" size={18} color="var(--gray-500)" />
              <span style={{ flex:1, fontSize:14, fontWeight:600, color:'var(--ink)' }}>Visa •••• 4821</span>
              <Icon name="chevron-right" size={17} color="var(--gray-400)" />
            </div>
            <button onClick={addFunds} style={{ width:'100%', display:'flex', alignItems:'center', justifyContent:'center', gap:8, background:'var(--gold-400)', color:'var(--on-gold)', border:0, borderRadius:12, padding:'15px', fontWeight:800, fontSize:15, cursor:'pointer', fontFamily:'var(--font-sans)', boxShadow:'var(--shadow-gold)' }}>
              <Icon name="lock" size={16} color="var(--on-gold)" />Pay ${amt.toFixed(2)}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { WalletScreen });