/* Admin → Billing & Invoices: revenue, invoices, collection status. */
function BillingScreen() {
  const [invoices, setInvoices] = React.useState([
    { id:'INV-2043', family:'Hatten Family', c:'green', amount:120.00, item:'Aftercare · May', status:'paid', due:'May 28' },
    { id:'INV-2044', family:'Carter Family', c:'blue', amount:15.00, item:'Field Trip Fee', status:'due', due:'Jun 10' },
    { id:'INV-2045', family:'Mitchell Family', c:'red', amount:48.50, item:'Lunch reload + Art fee', status:'overdue', due:'May 30' },
    { id:'INV-2046', family:'Perez Family', c:'gold', amount:80.00, item:'Coding Club · Jun', status:'paid', due:'Jun 1' },
    { id:'INV-2047', family:'Bennett Family', c:'cyan', amount:120.00, item:'Aftercare · Jun', status:'due', due:'Jun 15' },
  ]);
  const ST = {
    paid:    { label:'Paid',    bg:'var(--success-100)', fg:'var(--success-600)' },
    due:     { label:'Due',     bg:'var(--warning-100)', fg:'var(--warning-600)' },
    overdue: { label:'Overdue', bg:'var(--danger-100)',  fg:'var(--danger-600)' },
  };
  const money = (n) => '$' + n.toFixed(2);
  const markPaid = (id) => { setInvoices(iv => iv.map(x => x.id===id ? { ...x, status:'paid' } : x)); jlToast(id + ' marked paid', { icon:'check-check', color:'#1F9D57' }); };
  const remind = (x) => jlToast('Reminder sent to ' + x.family, { icon:'send' });
  const collected = invoices.filter(i=>i.status==='paid').reduce((s,i)=>s+i.amount,0);
  const outstanding = invoices.filter(i=>i.status!=='paid').reduce((s,i)=>s+i.amount,0);
  const overdue = invoices.filter(i=>i.status==='overdue').length;

  return (
    <div style={{ padding:'26px 32px 48px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:20, marginBottom:22 }}>
        <StatTile icon="banknote" tint="var(--success-100)" ic="var(--success-600)" value="$24,650" label="Collected this month" delta="+8%" trend="up" spark={[14,17,16,20,19,22,24.65]} />
        <StatTile icon="hourglass" tint="var(--warning-100)" ic="var(--warning-600)" value={money(outstanding)} label="Outstanding" />
        <StatTile icon="alert-triangle" tint="var(--danger-100)" ic="var(--danger-500)" value={overdue} label="Overdue invoices" />
        <StatTile icon="repeat" tint="var(--blue-100)" ic="var(--blue-500)" value="312" label="Auto-pay enrolled" delta="+24" trend="up" />
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:20, marginBottom:20 }}>
        <Panel title="Revenue — Last 6 Months" action={<Pill bg="var(--success-100)" fg="var(--success-600)"><Icon name="trending-up" size={13} color="var(--success-600)" />+11% YoY</Pill>}>
          <div style={{ padding:'10px 4px 2px' }}>
            <BarChart data={[18200,19600,21100,20400,22800,24650]} labels={['Jan','Feb','Mar','Apr','May','Jun']} color="var(--navy-600)" height={172} valueFmt={v=>'$'+(v/1000).toFixed(0)+'k'} />
          </div>
        </Panel>
        <Panel title="Revenue by Category">
          {[['Lunch accounts','$9,240','var(--gold-500)'],['Aftercare','$7,180','var(--blue-500)'],['Fees & trips','$5,030','var(--success-500)'],['Marketplace','$3,200','var(--danger-500)']].map(([l,v,c],i)=>(
            <div key={i} style={{ display:'flex', alignItems:'center', gap:11, padding:'12px 0', borderBottom: i<3?'1px solid var(--gray-100)':'0' }}>
              <span style={{ width:10, height:10, borderRadius:'999px', background:c, flex:'0 0 auto' }} />
              <span style={{ flex:1, fontSize:13.5, fontWeight:600, color:'var(--ink)' }}>{l}</span>
              <span style={{ fontSize:13.5, fontWeight:800, color:'var(--ink)', fontFamily:'var(--font-mono)' }}>{v}</span>
            </div>
          ))}
        </Panel>
      </div>

      <Panel title="Invoices" action={<button onClick={()=>jlToast('New invoice form opened', { icon:'plus' })} style={{ display:'flex', alignItems:'center', gap:6, background:'var(--gold-400)', color:'var(--on-gold)', border:0, borderRadius:9, padding:'8px 13px', fontWeight:700, fontSize:12.5, cursor:'pointer', fontFamily:'var(--font-sans)', boxShadow:'var(--shadow-gold)' }}><Icon name="plus" size={14} color="var(--on-gold)" />New Invoice</button>} pad={false}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 2fr 1.2fr 1fr 1.3fr', padding:'11px 18px', background:'var(--gray-50)', fontSize:11, fontWeight:800, letterSpacing:'.05em', textTransform:'uppercase', color:'var(--gray-500)' }}>
          <span>Invoice</span><span>Family / Item</span><span>Amount</span><span>Due</span><span style={{ textAlign:'right' }}>Status</span>
        </div>
        {invoices.map((x,i) => {
          const st = ST[x.status];
          return (
            <div key={x.id} style={{ display:'grid', gridTemplateColumns:'1fr 2fr 1.2fr 1fr 1.3fr', alignItems:'center', padding:'12px 18px', borderTop:'1px solid var(--gray-100)', fontSize:13.5 }}>
              <span style={{ fontFamily:'var(--font-mono)', fontSize:12.5, fontWeight:700, color:'var(--gray-600)' }}>{x.id}</span>
              <span style={{ display:'flex', alignItems:'center', gap:10, minWidth:0 }}>
                <Avatar initials={x.family.split(' ')[0].slice(0,2)} color={x.c} size={30} />
                <span style={{ minWidth:0 }}><span style={{ display:'block', fontWeight:700, color:'var(--ink)' }}>{x.family}</span><span style={{ fontSize:11.5, color:'var(--gray-400)' }}>{x.item}</span></span>
              </span>
              <span style={{ fontWeight:800, color:'var(--ink)', fontFamily:'var(--font-mono)' }}>{money(x.amount)}</span>
              <span style={{ color: x.status==='overdue'?'var(--danger-500)':'var(--gray-600)', fontWeight:600 }}>{x.due}</span>
              <span style={{ justifySelf:'end', display:'flex', alignItems:'center', gap:8 }}>
                {x.status==='paid'
                  ? <Pill bg={st.bg} fg={st.fg}><Icon name="check" size={12} color={st.fg} stroke={2.5} />{st.label}</Pill>
                  : <React.Fragment>
                      <Pill bg={st.bg} fg={st.fg}>{st.label}</Pill>
                      <button onClick={()=>remind(x)} title="Send reminder" style={{ width:30, height:30, borderRadius:8, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}><Icon name="send" size={14} color="var(--blue-500)" /></button>
                      <button onClick={()=>markPaid(x.id)} style={{ background:'var(--navy-600)', color:'#fff', border:0, borderRadius:8, padding:'7px 11px', fontWeight:700, fontSize:12, cursor:'pointer', fontFamily:'var(--font-sans)' }}>Mark Paid</button>
                    </React.Fragment>}
              </span>
            </div>
          );
        })}
      </Panel>
    </div>
  );
}
Object.assign(window, { BillingScreen });