/* Admin → Marketplace Manager: approve vendors, run fundraisers.
   Feeds the parent app's Marketplace screen. */
function MarketplaceManagerScreen() {
  const [pending, setPending] = React.useState([
    { id:1, n:'Bright Minds Tutoring', cat:'Tutoring', sub:'1-on-1 reading & math · submitted 2d ago', icon:'graduation-cap', tint:'var(--blue-100)', ic:'var(--blue-500)' },
    { id:2, n:'Katy Dance Academy', cat:'Enrichment', sub:'Ballet & hip-hop · submitted 3d ago', icon:'music', tint:'var(--danger-100)', ic:'var(--danger-500)' },
    { id:3, n:'Junior Robotics Lab', cat:'After-School', sub:'STEM club · submitted 5d ago', icon:'cpu', tint:'var(--info-100)', ic:'var(--info-500)' },
  ]);
  const [fundraisers, setFundraisers] = React.useState([
    { id:1, n:'New Library Books Drive', raised:3240, goal:5000, days:8 },
    { id:2, n:'8th Grade DC Trip', raised:11800, goal:18000, days:24 },
  ]);
  const approved = [
    { n:'Mathnasium of Katy', cat:'Tutoring', price:'$35/session', rating:'4.9', enroll:42 },
    { n:'Katy Youth Soccer League', cat:'Sports', price:'$120/season', rating:'4.7', enroll:88 },
    { n:'Young Coders Club', cat:'After-School', price:'$80/month', rating:'4.8', enroll:31 },
    { n:'Reading Buddies', cat:'Tutoring', price:'Free', rating:'5.0', enroll:64 },
  ];
  const decide = (v, ok) => {
    setPending(ps => ps.filter(x => x.id !== v.id));
    jlToast(v.n + (ok ? ' approved & published' : ' declined'), { icon: ok?'check-check':'x', color: ok?'#1F9D57':'#E5484D' });
  };
  const money = (n) => '$' + n.toLocaleString();

  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      {/* stat tiles */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:16 }}>
        <StatTile icon="store" tint="var(--blue-100)" ic="var(--blue-500)" value="18" label="Active listings" delta="+3" trend="up" />
        <StatTile icon="clock" tint="var(--warning-100)" ic="var(--warning-600)" value={pending.length} label="Pending approval" />
        <StatTile icon="heart-handshake" tint="var(--gold-100)" ic="var(--gold-600)" value="$15,040" label="Raised this term" delta="+12%" trend="up" />
        <StatTile icon="users" tint="var(--success-100)" ic="var(--success-600)" value="225" label="Total enrollments" delta="+18" trend="up" />
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:16 }}>
        {/* pending approvals */}
        <Panel title="Pending Approval" action={<Pill bg="var(--warning-100)" fg="var(--warning-600)">{pending.length} waiting</Pill>}>
          {pending.length === 0 ? (
            <div style={{ display:'flex', alignItems:'center', gap:10, padding:'14px 2px', color:'var(--success-600)' }}>
              <Icon name="circle-check-big" size={19} color="var(--success-500)" /><span style={{ fontSize:13.5, fontWeight:700 }}>All caught up — no vendors awaiting review.</span>
            </div>
          ) : pending.map((v,i) => (
            <div key={v.id} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 0', borderBottom: i<pending.length-1?'1px solid var(--gray-100)':'0' }}>
              <span style={{ width:40, height:40, borderRadius:10, background:v.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={v.icon} size={19} color={v.ic} /></span>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:14, fontWeight:700, color:'var(--ink)' }}>{v.n}</div>
                <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{v.cat} · {v.sub}</div>
              </div>
              <div style={{ display:'flex', gap:7 }}>
                <button onClick={()=>decide(v,true)} style={{ display:'flex', alignItems:'center', gap:6, background:'var(--success-500)', color:'#fff', border:0, borderRadius:9, padding:'8px 13px', fontWeight:700, fontSize:13, cursor:'pointer', fontFamily:'var(--font-sans)' }}><Icon name="check" size={15} color="#fff" />Approve</button>
                <button onClick={()=>decide(v,false)} style={{ width:34, height:34, borderRadius:9, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}><Icon name="x" size={15} color="var(--gray-500)" /></button>
              </div>
            </div>
          ))}
        </Panel>

        {/* fundraisers */}
        <Panel title="Active Fundraisers" action={<span onClick={()=>jlToast('New fundraiser form opened', { icon:'plus' })} style={{ display:'inline-flex', alignItems:'center', gap:5, fontSize:12.5, fontWeight:700, color:'var(--blue-500)', cursor:'pointer' }}><Icon name="plus" size={14} color="var(--blue-500)" />New</span>}>
          {fundraisers.map((f,i) => {
            const pct = Math.round((f.raised/f.goal)*100);
            return (
              <div key={f.id} style={{ padding:'13px 0', borderBottom: i<fundraisers.length-1?'1px solid var(--gray-100)':'0' }}>
                <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:7 }}>
                  <span style={{ fontSize:14, fontWeight:700, color:'var(--ink)' }}>{f.n}</span>
                  <span style={{ fontSize:12, color:'var(--gray-500)', fontWeight:600 }}>{f.days} days left</span>
                </div>
                <div style={{ height:9, borderRadius:'999px', background:'var(--gray-100)', overflow:'hidden' }}>
                  <div style={{ width:pct+'%', height:'100%', borderRadius:'999px', background:'var(--gold-400)' }} />
                </div>
                <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginTop:6 }}>
                  <span style={{ fontSize:13, fontWeight:800, color:'var(--ink)', fontFamily:'var(--font-mono)' }}>{money(f.raised)} <span style={{ color:'var(--gray-400)', fontWeight:600 }}>/ {money(f.goal)}</span></span>
                  <span style={{ fontSize:12.5, fontWeight:700, color:'var(--success-600)' }}>{pct}%</span>
                </div>
              </div>
            );
          })}
        </Panel>
      </div>

      {/* approved listings */}
      <Panel title="Approved Programs" action={<span onClick={()=>jlToast('Add a new listing', { icon:'plus' })} style={{ fontSize:12.5, fontWeight:700, color:'var(--blue-500)', cursor:'pointer' }}>Add Listing</span>} pad={false}>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr .8fr 1fr', padding:'11px 18px', background:'var(--gray-50)', fontSize:11, fontWeight:800, letterSpacing:'.05em', textTransform:'uppercase', color:'var(--gray-500)' }}>
          <span>Program</span><span>Category</span><span>Price</span><span>Rating</span><span style={{ textAlign:'right' }}>Enrolled</span>
        </div>
        {approved.map((a,i) => (
          <div key={i} onClick={()=>jlToast('Opening '+a.n, { icon:'store' })} style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr .8fr 1fr', alignItems:'center', padding:'12px 18px', borderTop:'1px solid var(--gray-100)', fontSize:13.5, cursor:'pointer' }}>
            <span style={{ fontWeight:700, color:'var(--ink)' }}>{a.n}</span>
            <span><Pill bg="var(--gray-100)" fg="var(--gray-600)">{a.cat}</Pill></span>
            <span style={{ color:'var(--gray-600)' }}>{a.price}</span>
            <span style={{ display:'flex', alignItems:'center', gap:4, color:'var(--gray-700)', fontWeight:700 }}><Icon name="star" size={13} color="var(--gold-500)" fill="var(--gold-500)" />{a.rating}</span>
            <span style={{ justifySelf:'end', fontWeight:700, color:'var(--ink)', fontFamily:'var(--font-mono)' }}>{a.enroll}</span>
          </div>
        ))}
      </Panel>
    </div>
  );
}
Object.assign(window, { MarketplaceManagerScreen });