const { useState, useEffect } = React;

// ── Auth helpers ─────────────────────────────────────────
const getToken  = () => localStorage.getItem('crm_token');
const getUser   = () => { try { return JSON.parse(localStorage.getItem('crm_user')); } catch { return null; } };
const saveAuth  = (token, user) => { localStorage.setItem('crm_token', token); localStorage.setItem('crm_user', JSON.stringify(user)); };
const clearAuth = () => { localStorage.removeItem('crm_token'); localStorage.removeItem('crm_user'); };

const authFetch = (url, opts={}) => {
  const headers = { 'Content-Type':'application/json', ...(opts.headers||{}) };
  const token = getToken();
  if (token) headers['Authorization'] = `Bearer ${token}`;
  return fetch(url, { ...opts, headers });
};

const api = {
  getMembers:     () => authFetch('/api/members').then(r => r.json()),
  addMember:      (d) => authFetch('/api/members', { method:'POST', body:JSON.stringify(d) }).then(r => r.json()),
  updateMember:   (id,d) => authFetch(`/api/members/${id}`, { method:'PUT', body:JSON.stringify(d) }).then(r => r.json()),
  deleteMember:   (id) => authFetch(`/api/members/${id}`, { method:'DELETE' }).then(r => r.json()),
  getCourses:     () => authFetch('/api/courses').then(r => r.json()),
  addCourse:      (d) => authFetch('/api/courses', { method:'POST', body:JSON.stringify(d) }).then(r => r.json()),
  getEnrollments: () => authFetch('/api/enrollments').then(r => r.json()),
  addEnrollment:  (d) => authFetch('/api/enrollments', { method:'POST', body:JSON.stringify(d) }).then(r => r.json()),
  getPayments:    () => authFetch('/api/payments').then(r => r.json()),
  addPayment:     (d) => authFetch('/api/payments', { method:'POST', body:JSON.stringify(d) }).then(r => r.json()),
  markPaid:       (id,method) => authFetch(`/api/payments/${id}/paid`, { method:'PUT', body:JSON.stringify({ method }) }).then(r => r.json()),
  getUsers:       () => authFetch('/api/users').then(r => r.json()),
  addUser:        (d) => authFetch('/api/users', { method:'POST', body:JSON.stringify(d) }).then(r => r.json()),
  updateUser:     (id,d) => authFetch(`/api/users/${id}`, { method:'PUT', body:JSON.stringify(d) }).then(r => r.json()),
  deleteUser:     (id) => authFetch(`/api/users/${id}`, { method:'DELETE' }).then(r => r.json()),
};

// ── Theme & helpers ───────────────────────────────────────
const THEME = {
  bg:'#0D1117', surface:'#161B22', surfaceAlt:'#1C2330', border:'#30363D',
  accent:'#2DD4BF', accentSoft:'#0F4C42', gold:'#F59E0B',
  purple:'#A78BFA', danger:'#F87171', success:'#34D399',
  text:'#E6EDF3', textMuted:'#8B949E', textFaint:'#484F58',
};
const fmt     = (n) => new Intl.NumberFormat('en-SG',{style:'currency',currency:'SGD'}).format(n);
const fmtDate = (d) => d ? new Date(d).toLocaleDateString('en-SG',{day:'2-digit',month:'short',year:'numeric'}) : '—';
const statusColor = { active:THEME.success, pending:THEME.gold, expired:THEME.danger, open:THEME.success, full:THEME.danger, paid:THEME.success, unpaid:THEME.gold, overdue:THEME.danger, confirmed:THEME.success };

const css = {
  wrap:    { fontFamily:"'DM Sans',sans-serif", background:THEME.bg, minHeight:'100vh', color:THEME.text, display:'flex' },
  sidebar: { width:240, background:THEME.surface, borderRight:`1px solid ${THEME.border}`, display:'flex', flexDirection:'column', flexShrink:0 },
  main:    { flex:1, overflow:'auto', padding:'32px 36px' },
  card:    (x={}) => ({ background:THEME.surface, border:`1px solid ${THEME.border}`, borderRadius:12, padding:20, ...x }),
  badge:   (c) => ({ background:c+'22', color:c, borderRadius:20, padding:'2px 10px', fontSize:12, fontWeight:600, display:'inline-block' }),
  btn:     (v='primary') => ({ padding:'8px 18px', borderRadius:8, fontWeight:600, fontSize:13, cursor:'pointer', border:'none', transition:'all .15s',
             ...(v==='primary' ? {background:THEME.accent,color:THEME.bg} :
                v==='ghost'   ? {background:'transparent',color:THEME.textMuted,border:`1px solid ${THEME.border}`} :
                v==='danger'  ? {background:THEME.danger+'22',color:THEME.danger,border:`1px solid ${THEME.danger}44`} :
                                {background:THEME.gold+'22',color:THEME.gold,border:`1px solid ${THEME.gold}44`}) }),
  input:   { background:THEME.surfaceAlt, border:`1px solid ${THEME.border}`, borderRadius:8, padding:'8px 12px', color:THEME.text, fontSize:14, outline:'none', width:'100%', boxSizing:'border-box' },
  label:   { fontSize:12, fontWeight:600, color:THEME.textMuted, textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:6, display:'block' },
  h1:      { fontSize:26, fontWeight:700, margin:0 },
  h2:      { fontSize:18, fontWeight:700, margin:0 },
  th:      { padding:'10px 14px', textAlign:'left', fontSize:11, fontWeight:700, color:THEME.textMuted, textTransform:'uppercase', letterSpacing:'.06em', borderBottom:`1px solid ${THEME.border}` },
  td:      { padding:'12px 14px', fontSize:13, borderBottom:`1px solid ${THEME.border}22` },
  grid:    (c) => ({ display:'grid', gridTemplateColumns:`repeat(${c},1fr)`, gap:16 }),
  navItem: (a) => ({ display:'flex', alignItems:'center', gap:10, padding:'10px 12px', borderRadius:8, cursor:'pointer', marginBottom:2, fontSize:14, fontWeight:500, transition:'all .15s',
             background:a?THEME.accentSoft:'transparent', color:a?THEME.accent:THEME.textMuted, border:a?`1px solid ${THEME.accent}22`:'1px solid transparent' }),
};

// ── Spinner ───────────────────────────────────────────────
function Spinner() {
  return (
    <div style={{display:'flex',justifyContent:'center',padding:40}}>
      <div style={{width:32,height:32,border:`3px solid ${THEME.border}`,borderTop:`3px solid ${THEME.accent}`,borderRadius:'50%',animation:'spin 0.8s linear infinite'}}/>
      <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>
    </div>
  );
}

// ── LOGIN ─────────────────────────────────────────────────
function LoginScreen({ onLogin }) {
  const [form, setForm]       = useState({ email:'', password:'' });
  const [error, setError]     = useState('');
  const [loading, setLoading] = useState(false);

  const handleLogin = async () => {
    if (!form.email || !form.password) return setError('Please enter your email and password.');
    setLoading(true); setError('');
    try {
      const res  = await fetch('/api/auth/login', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(form) });
      const data = await res.json();
      if (!res.ok) return setError(data.error || 'Login failed.');
      saveAuth(data.token, data.user);
      onLogin(data.user);
    } catch { setError('Connection error. Please try again.'); }
    setLoading(false);
  };

  return (
    <div style={{minHeight:'100vh',background:THEME.bg,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:"'DM Sans',sans-serif"}}>
      <div style={{width:400}}>
        <div style={{textAlign:'center',marginBottom:32}}>
          <div style={{fontSize:32,fontWeight:800,color:THEME.accent,letterSpacing:'-0.02em'}}>Asia AI</div>
          <div style={{fontSize:14,color:THEME.textMuted,marginTop:4}}>Association Platform</div>
        </div>
        <div style={{...css.card({padding:32}),border:`1px solid ${THEME.accent}33`}}>
          <h2 style={{...css.h2,marginBottom:24,textAlign:'center'}}>Sign in</h2>
          {error && <div style={{background:THEME.danger+'22',border:`1px solid ${THEME.danger}44`,borderRadius:8,padding:'10px 14px',marginBottom:16,fontSize:13,color:THEME.danger}}>{error}</div>}
          <div style={{marginBottom:16}}>
            <label style={css.label}>Email address</label>
            <input style={css.input} type="email" placeholder="admin@asiaai.sg" value={form.email}
              onChange={e=>setForm(f=>({...f,email:e.target.value}))}
              onKeyDown={e=>e.key==='Enter'&&handleLogin()} />
          </div>
          <div style={{marginBottom:24}}>
            <label style={css.label}>Password</label>
            <input style={css.input} type="password" placeholder="••••••••" value={form.password}
              onChange={e=>setForm(f=>({...f,password:e.target.value}))}
              onKeyDown={e=>e.key==='Enter'&&handleLogin()} />
          </div>
          <button style={{...css.btn(),width:'100%',padding:'12px',fontSize:15}} onClick={handleLogin} disabled={loading}>
            {loading?'Signing in…':'Sign In'}
          </button>
        </div>
        <div style={{textAlign:'center',marginTop:16,fontSize:12,color:THEME.textFaint}}>Asia AI Association Platform © {new Date().getFullYear()}</div>
      </div>
    </div>
  );
}

// ── DASHBOARD ─────────────────────────────────────────────
function Dashboard({ members, courses, enrollments, payments }) {
  const stats = [
    { label:'Total Members',    value:members.length,                                        sub:`${members.filter(m=>m.status==='active').length} active`,  color:THEME.accent,  icon:'👥' },
    { label:'Corporate Members',value:members.filter(m=>m.type==='corporate').length,        sub:'organisations',                                            color:THEME.gold,    icon:'🏢' },
    { label:'Revenue Collected',value:fmt(payments.filter(p=>p.status==='paid').reduce((s,p)=>s+Number(p.amount),0)), sub:'this cycle',                      color:THEME.success, icon:'💰' },
    { label:'Course Enrolments',value:enrollments.length,                                    sub:`${courses.length} courses`,                                color:THEME.purple,  icon:'🎓' },
    { label:'Pending Payments', value:payments.filter(p=>p.status!=='paid').length,          sub:'invoices',                                                 color:THEME.danger,  icon:'⚠️' },
    { label:'Open Courses',     value:courses.filter(c=>c.status==='open').length,           sub:'available',                                                color:THEME.accent,  icon:'📚' },
  ];
  return (
    <div>
      <div style={{marginBottom:28}}>
        <h1 style={css.h1}>Dashboard</h1>
        <p style={{color:THEME.textMuted,margin:'6px 0 0',fontSize:14}}>Welcome back — here's your organisation at a glance.</p>
      </div>
      <div style={css.grid(3)}>
        {stats.map((s,i)=>(
          <div key={i} style={{...css.card(),borderLeft:`3px solid ${s.color}`,display:'flex',gap:14,alignItems:'flex-start'}}>
            <div style={{fontSize:28,lineHeight:1}}>{s.icon}</div>
            <div>
              <div style={{fontSize:22,fontWeight:800,color:s.color}}>{s.value}</div>
              <div style={{fontWeight:600,fontSize:14}}>{s.label}</div>
              <div style={{fontSize:12,color:THEME.textMuted}}>{s.sub}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{...css.grid(2),marginTop:24}}>
        <div style={css.card()}>
          <h2 style={{...css.h2,marginBottom:16}}>Upcoming Renewals</h2>
          {members.filter(m=>m.status!=='expired').slice(0,6).map((m,i,arr)=>(
            <div key={i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 0',borderBottom:i<arr.length-1?`1px solid ${THEME.border}`:'none'}}>
              <div>
                <div style={{fontSize:13,fontWeight:600}}>{m.name}</div>
                <div style={{fontSize:11,color:THEME.textMuted}}>{m.plan}</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{fontSize:12,color:THEME.gold}}>{fmtDate(m.renewal_date)}</div>
                <span style={css.badge(m.type==='corporate'?THEME.gold:THEME.accent)}>{m.type}</span>
              </div>
            </div>
          ))}
          {members.length===0&&<div style={{color:THEME.textMuted,fontSize:13}}>No members yet.</div>}
        </div>
        <div style={css.card()}>
          <h2 style={{...css.h2,marginBottom:16}}>Recent Payments</h2>
          {payments.slice(0,6).map((p,i,arr)=>(
            <div key={i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 0',borderBottom:i<arr.length-1?`1px solid ${THEME.border}`:'none'}}>
              <div>
                <div style={{fontSize:13,fontWeight:600}}>{p.ref}</div>
                <div style={{fontSize:11,color:THEME.textMuted}}>{p.member_name||'—'}</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{fontWeight:700,fontSize:13}}>{fmt(p.amount)}</div>
                <span style={css.badge(statusColor[p.status]||THEME.textMuted)}>{p.status}</span>
              </div>
            </div>
          ))}
          {payments.length===0&&<div style={{color:THEME.textMuted,fontSize:13}}>No payments yet.</div>}
        </div>
      </div>
    </div>
  );
}

// ── MEMBERS ───────────────────────────────────────────────
function Members({ members, setMembers }) {
  const [tab,setTab]           = useState('all');
  const [search,setSearch]     = useState('');
  const [showForm,setShowForm] = useState(false);
  const [saving,setSaving]     = useState(false);
  const [form,setForm]         = useState({type:'individual',name:'',email:'',phone:'',plan:'Basic',contact_person:'',seats:1,status:'pending'});
  const plans = { individual:['Basic','Standard','Premium'], corporate:['Bronze Sponsor','Silver Sponsor','Gold Sponsor'] };
  const filtered = members.filter(m=>(tab==='all'||m.type===tab)&&(m.name.toLowerCase().includes(search.toLowerCase())||m.email.toLowerCase().includes(search.toLowerCase())));

  const handleAdd = async () => {
    if (!form.name||!form.email) return alert('Name and email are required.');
    setSaving(true);
    try { const m=await api.addMember(form); setMembers(ms=>[m,...ms]); setShowForm(false); setForm({type:'individual',name:'',email:'',phone:'',plan:'Basic',contact_person:'',seats:1,status:'pending'}); }
    catch(e) { alert('Error: '+e.message); }
    setSaving(false);
  };

  const handleDelete = async (id) => {
    if (!confirm('Remove this member?')) return;
    await api.deleteMember(id);
    setMembers(ms=>ms.filter(x=>x.id!==id));
  };

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:24}}>
        <div><h1 style={css.h1}>Membership</h1><p style={{color:THEME.textMuted,margin:'4px 0 0',fontSize:14}}>Manage individual & corporate members</p></div>
        <button style={css.btn()} onClick={()=>setShowForm(true)}>+ Add Member</button>
      </div>
      <div style={{display:'flex',gap:8,marginBottom:20}}>
        {['all','individual','corporate'].map(t=><button key={t} onClick={()=>setTab(t)} style={{...css.btn(tab===t?'primary':'ghost'),textTransform:'capitalize'}}>{t}</button>)}
        <input placeholder="Search…" style={{...css.input,width:220,marginLeft:'auto'}} value={search} onChange={e=>setSearch(e.target.value)}/>
      </div>
      {showForm&&(
        <div style={{...css.card({marginBottom:20,background:THEME.surfaceAlt,border:`1px solid ${THEME.accent}44`})}}>
          <h2 style={{...css.h2,marginBottom:16,color:THEME.accent}}>New Member</h2>
          <div style={css.grid(3)}>
            <div><label style={css.label}>Type</label>
              <select style={css.input} value={form.type} onChange={e=>setForm(f=>({...f,type:e.target.value,plan:e.target.value==='individual'?'Basic':'Bronze Sponsor'}))}>
                <option value="individual">Individual</option><option value="corporate">Corporate</option>
              </select></div>
            <div><label style={css.label}>{form.type==='corporate'?'Organisation Name':'Full Name'}</label>
              <input style={css.input} placeholder="Name" value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))}/></div>
            <div><label style={css.label}>Email</label>
              <input style={css.input} placeholder="email@domain.com" value={form.email} onChange={e=>setForm(f=>({...f,email:e.target.value}))}/></div>
            <div><label style={css.label}>Phone</label>
              <input style={css.input} placeholder="+65 XXXX XXXX" value={form.phone} onChange={e=>setForm(f=>({...f,phone:e.target.value}))}/></div>
            <div><label style={css.label}>Plan</label>
              <select style={css.input} value={form.plan} onChange={e=>setForm(f=>({...f,plan:e.target.value}))}>
                {plans[form.type].map(p=><option key={p}>{p}</option>)}</select></div>
            <div><label style={css.label}>Status</label>
              <select style={css.input} value={form.status} onChange={e=>setForm(f=>({...f,status:e.target.value}))}>
                <option value="pending">Pending</option><option value="active">Active</option><option value="expired">Expired</option>
              </select></div>
            {form.type==='corporate'&&<div><label style={css.label}>Contact Person</label>
              <input style={css.input} placeholder="Primary contact" value={form.contact_person} onChange={e=>setForm(f=>({...f,contact_person:e.target.value}))}/></div>}
          </div>
          <div style={{display:'flex',gap:10,marginTop:16}}>
            <button style={css.btn()} onClick={handleAdd} disabled={saving}>{saving?'Saving…':'Save Member'}</button>
            <button style={css.btn('ghost')} onClick={()=>setShowForm(false)}>Cancel</button>
          </div>
        </div>
      )}
      <div style={css.card({padding:0,overflow:'hidden'})}>
        <table style={{width:'100%',borderCollapse:'collapse'}}>
          <thead><tr style={{background:THEME.surfaceAlt}}>
            {['Name','Type','Plan','Status','Renewal Date','Payment',''].map(h=><th key={h} style={css.th}>{h}</th>)}
          </tr></thead>
          <tbody>
            {filtered.map(m=>(
              <tr key={m.id}>
                <td style={css.td}><div style={{fontWeight:600}}>{m.name}</div><div style={{fontSize:11,color:THEME.textMuted}}>{m.email}</div>{m.contact_person&&<div style={{fontSize:11,color:THEME.textMuted}}>c/o {m.contact_person}</div>}</td>
                <td style={css.td}><span style={css.badge(m.type==='corporate'?THEME.gold:THEME.purple)}>{m.type}</span></td>
                <td style={{...css.td,fontWeight:500}}>{m.plan}</td>
                <td style={css.td}><span style={css.badge(statusColor[m.status]||THEME.textMuted)}>{m.status}</span></td>
                <td style={{...css.td,color:THEME.textMuted,fontSize:12}}>{fmtDate(m.renewal_date)}</td>
                <td style={css.td}><span style={css.badge(m.paid?THEME.success:THEME.danger)}>{m.paid?'Paid':'Unpaid'}</span></td>
                <td style={css.td}><button style={{...css.btn('danger'),padding:'4px 10px'}} onClick={()=>handleDelete(m.id)}>Remove</button></td>
              </tr>
            ))}
          </tbody>
        </table>
        {filtered.length===0&&<div style={{textAlign:'center',padding:32,color:THEME.textMuted}}>No members found.</div>}
      </div>
    </div>
  );
}

// ── COURSES ───────────────────────────────────────────────
function Courses({ courses, setCourses, members }) {
  const [showForm,setShowForm]     = useState(false);
  const [enrollForm,setEnrollForm] = useState(null);
  const [saving,setSaving]         = useState(false);
  const [selectedMember,setSelectedMember] = useState('');
  const [form,setForm] = useState({title:'',category:'Leadership',duration:'1 day',fee:'',max_seats:20,start_date:'',instructor:'',description:''});
  const cats = ['Leadership','Fundraising','Marketing','Finance','Governance','HR','Technology'];

  const handleAddCourse = async () => {
    if (!form.title) return alert('Course title is required.');
    setSaving(true);
    try { const c=await api.addCourse({...form,fee:Number(form.fee),max_seats:Number(form.max_seats)}); setCourses(cs=>[...cs,c]); setShowForm(false); }
    catch(e) { alert('Error: '+e.message); }
    setSaving(false);
  };

  const handleEnroll = async (course) => {
    if (!selectedMember) return alert('Please select a member.');
    setSaving(true);
    try {
      await api.addEnrollment({member_id:selectedMember,course_id:course.id,amount:course.fee,pay_method:null});
      setCourses(cs=>cs.map(c=>c.id===course.id?{...c,enrolled:Number(c.enrolled)+1,status:Number(c.enrolled)+1>=c.max_seats?'full':'open'}:c));
      setEnrollForm(null); setSelectedMember('');
    } catch(e) { alert('Error: '+e.message); }
    setSaving(false);
  };

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:24}}>
        <div><h1 style={css.h1}>Training & Development</h1><p style={{color:THEME.textMuted,margin:'4px 0 0',fontSize:14}}>Manage courses and student enrolments</p></div>
        <button style={css.btn()} onClick={()=>setShowForm(true)}>+ New Course</button>
      </div>
      {showForm&&(
        <div style={{...css.card({marginBottom:20,background:THEME.surfaceAlt,border:`1px solid ${THEME.accent}44`})}}>
          <h2 style={{...css.h2,marginBottom:16,color:THEME.accent}}>New Course</h2>
          <div style={css.grid(3)}>
            {[['title','Course Title'],['instructor','Instructor'],['duration','Duration'],['start_date','Start Date'],['fee','Fee (SGD)'],['max_seats','Max Seats']].map(([k,label])=>(
              <div key={k}><label style={css.label}>{label}</label>
                <input style={css.input} type={k==='start_date'?'date':'text'} value={form[k]} onChange={e=>setForm(f=>({...f,[k]:e.target.value}))}/></div>
            ))}
            <div><label style={css.label}>Category</label>
              <select style={css.input} value={form.category} onChange={e=>setForm(f=>({...f,category:e.target.value}))}>
                {cats.map(c=><option key={c}>{c}</option>)}</select></div>
          </div>
          <div style={{marginTop:12}}><label style={css.label}>Description</label>
            <textarea style={{...css.input,height:60,resize:'vertical'}} value={form.description} onChange={e=>setForm(f=>({...f,description:e.target.value}))}/></div>
          <div style={{display:'flex',gap:10,marginTop:16}}>
            <button style={css.btn()} onClick={handleAddCourse} disabled={saving}>{saving?'Saving…':'Save Course'}</button>
            <button style={css.btn('ghost')} onClick={()=>setShowForm(false)}>Cancel</button>
          </div>
        </div>
      )}
      <div style={css.grid(2)}>
        {courses.map(course=>(
          <div key={course.id} style={{...css.card(),border:`1px solid ${course.status==='full'?THEME.danger+'44':THEME.border}`}}>
            <div style={{display:'flex',justifyContent:'space-between',marginBottom:8}}>
              <span style={css.badge(THEME.purple)}>{course.category}</span>
              <span style={css.badge(statusColor[course.status])}>{course.status}</span>
            </div>
            <h2 style={{...css.h2,fontSize:16,marginBottom:6}}>{course.title}</h2>
            <p style={{fontSize:13,color:THEME.textMuted,margin:'0 0 14px'}}>{course.description}</p>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:14}}>
              {[['📅','Date',fmtDate(course.start_date)],['⏱','Duration',course.duration],['👤','Instructor',course.instructor],['💵','Fee',fmt(course.fee)]].map(([ic,k,v])=>(
                <div key={k} style={{background:THEME.surfaceAlt,borderRadius:8,padding:'8px 10px'}}>
                  <div style={{fontSize:11,color:THEME.textMuted}}>{ic} {k}</div>
                  <div style={{fontSize:13,fontWeight:600}}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{marginBottom:14}}>
              <div style={{display:'flex',justifyContent:'space-between',fontSize:12,color:THEME.textMuted,marginBottom:4}}>
                <span>Enrolments</span><span>{course.enrolled}/{course.max_seats}</span>
              </div>
              <div style={{background:THEME.border,borderRadius:4,height:6}}>
                <div style={{width:`${(course.enrolled/course.max_seats)*100}%`,background:course.status==='full'?THEME.danger:THEME.accent,height:'100%',borderRadius:4}}/>
              </div>
            </div>
            {course.status!=='full'&&<button style={css.btn()} onClick={()=>setEnrollForm(course)}>Enrol Student</button>}
          </div>
        ))}
        {courses.length===0&&<div style={{color:THEME.textMuted,gridColumn:'1/-1',textAlign:'center',padding:32}}>No courses yet.</div>}
      </div>
      {enrollForm&&(
        <div style={{position:'fixed',inset:0,background:'#00000088',zIndex:100,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div style={{...css.card({width:420,background:THEME.surface}),border:`1px solid ${THEME.accent}44`}}>
            <h2 style={{...css.h2,color:THEME.accent,marginBottom:16}}>Enrol into: {enrollForm.title}</h2>
            <label style={css.label}>Select Member</label>
            <select style={{...css.input,marginBottom:20}} value={selectedMember} onChange={e=>setSelectedMember(e.target.value)}>
              <option value="">— Choose a member —</option>
              {members.map(m=><option key={m.id} value={m.id}>{m.name} ({m.type})</option>)}
            </select>
            <div style={{background:THEME.surfaceAlt,borderRadius:8,padding:12,marginBottom:16,fontSize:13}}>
              <div style={{display:'flex',justifyContent:'space-between'}}>
                <span style={{color:THEME.textMuted}}>Course Fee</span>
                <span style={{fontWeight:700,color:THEME.gold}}>{fmt(enrollForm.fee)}</span>
              </div>
            </div>
            <div style={{display:'flex',gap:10}}>
              <button style={css.btn()} onClick={()=>handleEnroll(enrollForm)} disabled={saving}>{saving?'Saving…':'Confirm Enrolment'}</button>
              <button style={css.btn('ghost')} onClick={()=>{setEnrollForm(null);setSelectedMember('');}}>Cancel</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── ENROLLMENTS ───────────────────────────────────────────
function Enrollments({ enrollments }) {
  return (
    <div>
      <div style={{marginBottom:24}}><h1 style={css.h1}>Enrolments</h1><p style={{color:THEME.textMuted,margin:'4px 0 0',fontSize:14}}>All student course enrolments</p></div>
      <div style={css.card({padding:0,overflow:'hidden'})}>
        <table style={{width:'100%',borderCollapse:'collapse'}}>
          <thead><tr style={{background:THEME.surfaceAlt}}>
            {['Student','Course','Enrolled On','Fee','Payment','Status'].map(h=><th key={h} style={css.th}>{h}</th>)}
          </tr></thead>
          <tbody>
            {enrollments.map(e=>(
              <tr key={e.id}>
                <td style={css.td}><div style={{fontWeight:600}}>{e.member_name}</div><div style={{fontSize:11,color:THEME.textMuted}}>{e.member_email}</div></td>
                <td style={css.td}><div style={{fontWeight:600}}>{e.course_title}</div><div style={{fontSize:11,color:THEME.textMuted}}>{e.course_category}</div></td>
                <td style={{...css.td,fontSize:12,color:THEME.textMuted}}>{fmtDate(e.enrolled_on)}</td>
                <td style={{...css.td,fontWeight:700}}>{fmt(e.amount)}</td>
                <td style={css.td}>{e.pay_method?<span style={css.badge(THEME.purple)}>{e.pay_method}</span>:<span style={css.badge(THEME.danger)}>Pending</span>}</td>
                <td style={css.td}><span style={css.badge(statusColor[e.status]||THEME.textMuted)}>{e.status}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
        {enrollments.length===0&&<div style={{textAlign:'center',padding:32,color:THEME.textMuted}}>No enrolments yet.</div>}
      </div>
    </div>
  );
}

// ── PAYMENTS ──────────────────────────────────────────────
function Payments({ payments, setPayments, members }) {
  const [showForm,setShowForm] = useState(false);
  const [saving,setSaving]     = useState(false);
  const [form,setForm]         = useState({member_id:'',type:'Membership',amount:'',method:'PayNow'});
  const total = (st) => payments.filter(p=>p.status===st).reduce((s,p)=>s+Number(p.amount),0);
  const gateways = [
    {name:'Stripe',   logo:'💳',color:'#635BFF',desc:'Cards, Apple Pay, Google Pay',status:'Configure',fees:'2.9% + S$0.30'},
    {name:'PayNow',   logo:'🇸🇬',color:'#EF4444',desc:'Singapore instant transfer',  status:'Configure',fees:'0.5%'},
    {name:'PayPal',   logo:'🅿️', color:'#003087',desc:'PayPal & credit cards',       status:'Configure',fees:'3.4% + S$0.50'},
    {name:'Bank Transfer',logo:'🏦',color:THEME.textMuted,desc:'DBS / OCBC / UOB',  status:'Enabled',  fees:'Free'},
  ];

  const handleAdd = async () => {
    if (!form.member_id||!form.amount) return alert('Member and amount required.');
    setSaving(true);
    try { const p=await api.addPayment(form); setPayments(ps=>[p,...ps]); setShowForm(false); setForm({member_id:'',type:'Membership',amount:'',method:'PayNow'}); }
    catch(e) { alert('Error: '+e.message); }
    setSaving(false);
  };

  const handleMarkPaid = async (id,method) => {
    const updated = await api.markPaid(id,method||'PayNow');
    setPayments(ps=>ps.map(p=>p.id===id?{...p,status:'paid',method:updated.method}:p));
  };

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:24}}>
        <div><h1 style={css.h1}>Payments & Billing</h1><p style={{color:THEME.textMuted,margin:'4px 0 0',fontSize:14}}>Invoices, payment gateways and financial records</p></div>
        <button style={css.btn()} onClick={()=>setShowForm(true)}>+ New Invoice</button>
      </div>
      <div style={{...css.grid(3),marginBottom:24}}>
        {[['Collected',total('paid'),THEME.success],['Pending',total('unpaid'),THEME.gold],['Overdue',total('overdue'),THEME.danger]].map(([l,v,c])=>(
          <div key={l} style={{...css.card(),textAlign:'center',borderTop:`3px solid ${c}`}}>
            <div style={{fontSize:24,fontWeight:800,color:c}}>{fmt(v)}</div>
            <div style={{color:THEME.textMuted,fontSize:13}}>{l}</div>
          </div>
        ))}
      </div>
      <div style={{...css.card({marginBottom:24})}}>
        <h2 style={{...css.h2,marginBottom:16}}>Payment Gateways</h2>
        <div style={css.grid(4)}>
          {gateways.map(g=>(
            <div key={g.name} style={{background:THEME.surfaceAlt,border:`1px solid ${THEME.border}`,borderRadius:10,padding:16}}>
              <div style={{fontSize:24,marginBottom:8}}>{g.logo}</div>
              <div style={{fontWeight:700,fontSize:14}}>{g.name}</div>
              <div style={{fontSize:11,color:THEME.textMuted,marginBottom:8}}>{g.desc}</div>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                <span style={css.badge(g.status==='Enabled'?THEME.success:THEME.gold)}>{g.status}</span>
                <span style={{fontSize:11,color:THEME.gold}}>{g.fees}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      {showForm&&(
        <div style={{...css.card({marginBottom:20,background:THEME.surfaceAlt,border:`1px solid ${THEME.gold}44`})}}>
          <h2 style={{...css.h2,color:THEME.gold,marginBottom:16}}>New Invoice</h2>
          <div style={css.grid(4)}>
            <div><label style={css.label}>Member</label>
              <select style={css.input} value={form.member_id} onChange={e=>setForm(f=>({...f,member_id:e.target.value}))}>
                <option value="">— Select —</option>
                {members.map(m=><option key={m.id} value={m.id}>{m.name}</option>)}
              </select></div>
            <div><label style={css.label}>Type</label>
              <select style={css.input} value={form.type} onChange={e=>setForm(f=>({...f,type:e.target.value}))}>
                {['Membership','Corporate Membership','Course Fee','Donation','Event Fee'].map(t=><option key={t}>{t}</option>)}
              </select></div>
            <div><label style={css.label}>Amount (SGD)</label>
              <input style={css.input} type="number" placeholder="0.00" value={form.amount} onChange={e=>setForm(f=>({...f,amount:e.target.value}))}/></div>
            <div><label style={css.label}>Method</label>
              <select style={css.input} value={form.method} onChange={e=>setForm(f=>({...f,method:e.target.value}))}>
                {['Stripe','PayNow','PayPal','Bank Transfer'].map(m=><option key={m}>{m}</option>)}
              </select></div>
          </div>
          <div style={{display:'flex',gap:10,marginTop:16}}>
            <button style={css.btn('gold')} onClick={handleAdd} disabled={saving}>{saving?'Saving…':'Create Invoice'}</button>
            <button style={css.btn('ghost')} onClick={()=>setShowForm(false)}>Cancel</button>
          </div>
        </div>
      )}
      <div style={css.card({padding:0,overflow:'hidden'})}>
        <table style={{width:'100%',borderCollapse:'collapse'}}>
          <thead><tr style={{background:THEME.surfaceAlt}}>
            {['Invoice Ref','Member','Type','Amount','Date','Method','Status',''].map(h=><th key={h} style={css.th}>{h}</th>)}
          </tr></thead>
          <tbody>
            {payments.map(p=>(
              <tr key={p.id}>
                <td style={{...css.td,fontWeight:700,color:THEME.accent,fontSize:12}}>{p.ref}</td>
                <td style={css.td}>{p.member_name||'—'}</td>
                <td style={{...css.td,fontSize:12,color:THEME.textMuted}}>{p.type}</td>
                <td style={{...css.td,fontWeight:700}}>{fmt(p.amount)}</td>
                <td style={{...css.td,fontSize:12,color:THEME.textMuted}}>{fmtDate(p.date)}</td>
                <td style={css.td}>{p.method?<span style={css.badge(THEME.purple)}>{p.method}</span>:'—'}</td>
                <td style={css.td}><span style={css.badge(statusColor[p.status]||THEME.textMuted)}>{p.status}</span></td>
                <td style={css.td}>{p.status!=='paid'&&<button style={{...css.btn(),padding:'4px 10px',fontSize:12}} onClick={()=>handleMarkPaid(p.id,p.method)}>Mark Paid</button>}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {payments.length===0&&<div style={{textAlign:'center',padding:32,color:THEME.textMuted}}>No invoices yet.</div>}
      </div>
    </div>
  );
}

// ── REPORTS ───────────────────────────────────────────────
function Reports({ members, courses, payments, enrollments }) {
  const totalRevenue      = payments.filter(p=>p.status==='paid').reduce((s,p)=>s+Number(p.amount),0);
  const membershipRevenue = payments.filter(p=>p.status==='paid'&&p.type&&p.type.includes('Membership')).reduce((s,p)=>s+Number(p.amount),0);
  const courseRevenue     = enrollments.filter(e=>e.paid).reduce((s,e)=>s+Number(e.amount),0);
  const planDist = {};
  members.forEach(m=>{ planDist[m.plan]=(planDist[m.plan]||0)+1; });

  return (
    <div>
      <div style={{marginBottom:24}}><h1 style={css.h1}>Reports & Analytics</h1><p style={{color:THEME.textMuted,margin:'4px 0 0',fontSize:14}}>Organisation performance overview</p></div>
      <div style={css.grid(2)}>
        <div style={css.card()}>
          <h2 style={{...css.h2,marginBottom:16}}>Membership Breakdown</h2>
          {[['Individual Members',members.filter(m=>m.type==='individual').length,THEME.purple],['Corporate Members',members.filter(m=>m.type==='corporate').length,THEME.gold],['Active Members',members.filter(m=>m.status==='active').length,THEME.success],['Pending / Expired',members.filter(m=>m.status!=='active').length,THEME.danger]].map(([label,val,color])=>(
            <div key={label} style={{marginBottom:14}}>
              <div style={{display:'flex',justifyContent:'space-between',fontSize:13,marginBottom:4}}>
                <span style={{color:THEME.textMuted}}>{label}</span><span style={{fontWeight:700,color}}>{val}</span>
              </div>
              <div style={{background:THEME.border,borderRadius:4,height:8}}>
                <div style={{width:`${members.length?(val/members.length)*100:0}%`,background:color,height:'100%',borderRadius:4}}/>
              </div>
            </div>
          ))}
        </div>
        <div style={css.card()}>
          <h2 style={{...css.h2,marginBottom:16}}>Revenue Breakdown</h2>
          {[['Total Collected',totalRevenue,THEME.success],['Membership Revenue',membershipRevenue,THEME.accent],['Training Revenue',courseRevenue,THEME.purple]].map(([label,val,color])=>(
            <div key={label} style={{background:THEME.surfaceAlt,borderRadius:10,padding:14,marginBottom:10}}>
              <div style={{fontSize:12,color:THEME.textMuted}}>{label}</div>
              <div style={{fontSize:20,fontWeight:800,color}}>{fmt(val)}</div>
              <div style={{background:THEME.border,borderRadius:4,height:4,marginTop:8}}>
                <div style={{width:`${totalRevenue?(val/totalRevenue)*100:0}%`,background:color,height:'100%',borderRadius:4}}/>
              </div>
            </div>
          ))}
        </div>
        <div style={css.card()}>
          <h2 style={{...css.h2,marginBottom:16}}>Plan Distribution</h2>
          {Object.entries(planDist).map(([plan,count])=>(
            <div key={plan} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 0',borderBottom:`1px solid ${THEME.border}`}}>
              <span style={{fontSize:13}}>{plan}</span>
              <div style={{display:'flex',gap:6,alignItems:'center'}}>
                {Array.from({length:count}).map((_,i)=><div key={i} style={{width:10,height:10,borderRadius:'50%',background:THEME.accent}}/>)}
                <span style={{fontWeight:700,minWidth:20,textAlign:'right'}}>{count}</span>
              </div>
            </div>
          ))}
          {Object.keys(planDist).length===0&&<div style={{color:THEME.textMuted,fontSize:13}}>No members yet.</div>}
        </div>
        <div style={css.card()}>
          <h2 style={{...css.h2,marginBottom:16}}>Course Performance</h2>
          {courses.map(c=>(
            <div key={c.id} style={{marginBottom:14}}>
              <div style={{display:'flex',justifyContent:'space-between',marginBottom:4}}>
                <span style={{fontSize:13}}>{c.title}</span>
                <span style={{fontSize:12,color:THEME.gold}}>{fmt(c.enrolled*c.fee)}</span>
              </div>
              <div style={{background:THEME.border,borderRadius:4,height:6}}>
                <div style={{width:`${(c.enrolled/c.max_seats)*100}%`,background:c.status==='full'?THEME.danger:THEME.accent,height:'100%',borderRadius:4}}/>
              </div>
              <div style={{fontSize:11,color:THEME.textMuted,marginTop:2}}>{c.enrolled}/{c.max_seats} seats filled</div>
            </div>
          ))}
          {courses.length===0&&<div style={{color:THEME.textMuted,fontSize:13}}>No courses yet.</div>}
        </div>
      </div>
    </div>
  );
}

// ── USER MANAGEMENT ───────────────────────────────────────
function UserManagement() {
  const [users,setUsers]       = useState([]);
  const [showForm,setShowForm] = useState(false);
  const [saving,setSaving]     = useState(false);
  const [form,setForm]         = useState({name:'',email:'',password:'',role:'staff'});

  useEffect(()=>{ api.getUsers().then(setUsers).catch(()=>{}); },[]);

  const handleAdd = async () => {
    if (!form.name||!form.email||!form.password) return alert('All fields required.');
    setSaving(true);
    try { const u=await api.addUser(form); setUsers(us=>[u,...us]); setShowForm(false); setForm({name:'',email:'',password:'',role:'staff'}); }
    catch(e) { alert('Error: '+e.message); }
    setSaving(false);
  };

  const toggleActive = async (user) => {
    const updated = await api.updateUser(user.id,{...user,active:!user.active});
    setUsers(us=>us.map(u=>u.id===user.id?{...u,active:updated.active}:u));
  };

  const handleDelete = async (id) => {
    if (!confirm('Delete this user?')) return;
    await api.deleteUser(id);
    setUsers(us=>us.filter(u=>u.id!==id));
  };

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:24}}>
        <div><h1 style={css.h1}>User Management</h1><p style={{color:THEME.textMuted,margin:'4px 0 0',fontSize:14}}>Manage portal access and roles</p></div>
        <button style={css.btn()} onClick={()=>setShowForm(true)}>+ Add User</button>
      </div>
      {showForm&&(
        <div style={{...css.card({marginBottom:20,background:THEME.surfaceAlt,border:`1px solid ${THEME.accent}44`})}}>
          <h2 style={{...css.h2,marginBottom:16,color:THEME.accent}}>New User</h2>
          <div style={css.grid(4)}>
            <div><label style={css.label}>Full Name</label><input style={css.input} placeholder="Full name" value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))}/></div>
            <div><label style={css.label}>Email</label><input style={css.input} type="email" placeholder="user@asiaai.sg" value={form.email} onChange={e=>setForm(f=>({...f,email:e.target.value}))}/></div>
            <div><label style={css.label}>Password</label><input style={css.input} type="password" placeholder="Min 8 characters" value={form.password} onChange={e=>setForm(f=>({...f,password:e.target.value}))}/></div>
            <div><label style={css.label}>Role</label>
              <select style={css.input} value={form.role} onChange={e=>setForm(f=>({...f,role:e.target.value}))}>
                <option value="admin">Admin — full access</option>
                <option value="staff">Staff — read & write</option>
                <option value="readonly">Read Only — view only</option>
              </select></div>
          </div>
          <div style={{display:'flex',gap:10,marginTop:16}}>
            <button style={css.btn()} onClick={handleAdd} disabled={saving}>{saving?'Saving…':'Create User'}</button>
            <button style={css.btn('ghost')} onClick={()=>setShowForm(false)}>Cancel</button>
          </div>
        </div>
      )}
      <div style={css.card({padding:0,overflow:'hidden'})}>
        <table style={{width:'100%',borderCollapse:'collapse'}}>
          <thead><tr style={{background:THEME.surfaceAlt}}>
            {['Name','Email','Role','Status','Last Login',''].map(h=><th key={h} style={css.th}>{h}</th>)}
          </tr></thead>
          <tbody>
            {users.map(u=>(
              <tr key={u.id}>
                <td style={{...css.td,fontWeight:600}}>{u.name}</td>
                <td style={{...css.td,color:THEME.textMuted,fontSize:12}}>{u.email}</td>
                <td style={css.td}><span style={css.badge(u.role==='admin'?THEME.accent:u.role==='staff'?THEME.purple:THEME.textMuted)}>{u.role}</span></td>
                <td style={css.td}><span style={css.badge(u.active?THEME.success:THEME.danger)}>{u.active?'Active':'Disabled'}</span></td>
                <td style={{...css.td,fontSize:12,color:THEME.textMuted}}>{u.last_login?fmtDate(u.last_login):'Never'}</td>
                <td style={css.td}>
                  <div style={{display:'flex',gap:6}}>
                    <button style={{...css.btn(u.active?'ghost':'primary'),padding:'4px 10px',fontSize:12}} onClick={()=>toggleActive(u)}>{u.active?'Disable':'Enable'}</button>
                    <button style={{...css.btn('danger'),padding:'4px 10px',fontSize:12}} onClick={()=>handleDelete(u.id)}>Delete</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {users.length===0&&<div style={{textAlign:'center',padding:32,color:THEME.textMuted}}>No users found.</div>}
      </div>
    </div>
  );
}

// ── APP SHELL ─────────────────────────────────────────────
const NAV = [
  { id:'dashboard',   icon:'⬛', label:'Dashboard'      },
  { id:'members',     icon:'👥', label:'Membership'      },
  { id:'courses',     icon:'🎓', label:'Training & Dev'  },
  { id:'enrollments', icon:'📋', label:'Enrolments'      },
  { id:'payments',    icon:'💳', label:'Payments'        },
  { id:'reports',     icon:'📊', label:'Reports'         },
  { id:'users',       icon:'🔑', label:'User Management' },
];

function App() {
  const [page,setPage]               = useState('dashboard');
  const [currentUser,setCurrentUser] = useState(()=>getUser());
  const [members,setMembers]         = useState([]);
  const [courses,setCourses]         = useState([]);
  const [enrollments,setEnrollments] = useState([]);
  const [payments,setPayments]       = useState([]);
  const [loading,setLoading]         = useState(true);

  useEffect(()=>{
    if (!currentUser||!getToken()) return;
    Promise.all([api.getMembers(),api.getCourses(),api.getEnrollments(),api.getPayments()])
      .then(([m,c,e,p])=>{
        setMembers(Array.isArray(m)?m:[]);
        setCourses(Array.isArray(c)?c:[]);
        setEnrollments(Array.isArray(e)?e:[]);
        setPayments(Array.isArray(p)?p:[]);
        setLoading(false);
      }).catch(()=>setLoading(false));
  },[currentUser]);

  const handleLogin  = (user) => { setCurrentUser(user); setLoading(true); };
  const handleLogout = () => { clearAuth(); setCurrentUser(null); setMembers([]); setCourses([]); setEnrollments([]); setPayments([]); };

  if (!currentUser) return <LoginScreen onLogin={handleLogin}/>;

  const renderPage = () => {
    if (loading) return <Spinner/>;
    switch(page) {
      case 'dashboard':   return <Dashboard members={members} courses={courses} enrollments={enrollments} payments={payments}/>;
      case 'members':     return <Members members={members} setMembers={setMembers}/>;
      case 'courses':     return <Courses courses={courses} setCourses={setCourses} members={members}/>;
      case 'enrollments': return <Enrollments enrollments={enrollments}/>;
      case 'payments':    return <Payments payments={payments} setPayments={setPayments} members={members}/>;
      case 'reports':     return <Reports members={members} courses={courses} payments={payments} enrollments={enrollments}/>;
      case 'users':       return <UserManagement/>;
      default:            return <Dashboard members={members} courses={courses} enrollments={enrollments} payments={payments}/>;
    }
  };

  return (
    <div style={css.wrap}>
      <div style={css.sidebar}>
        <div style={{padding:'28px 24px 16px',borderBottom:`1px solid ${THEME.border}`}}>
          <div style={{fontWeight:800,fontSize:16,color:THEME.accent}}>Asia AI</div>
          <div style={{fontSize:11,color:THEME.textMuted,marginTop:2}}>Association Platform</div>
        </div>
        <nav style={{padding:'16px 12px',flex:1}}>
          <div style={{fontSize:10,fontWeight:700,color:THEME.textFaint,letterSpacing:'.1em',textTransform:'uppercase',padding:'0 12px',marginBottom:8}}>Main Menu</div>
          {NAV.filter(n=>n.id!=='users'||currentUser.role==='admin').map(n=>(
            <div key={n.id} style={css.navItem(page===n.id)} onClick={()=>setPage(n.id)}>
              <span style={{fontSize:16}}>{n.icon}</span><span>{n.label}</span>
            </div>
          ))}
        </nav>
        <div style={{padding:'16px 20px',borderTop:`1px solid ${THEME.border}`}}>
          <div style={{width:32,height:32,borderRadius:'50%',background:THEME.accentSoft,border:`2px solid ${THEME.accent}`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:14,marginBottom:8}}>👤</div>
          <div style={{fontSize:13,fontWeight:600}}>{currentUser.name}</div>
          <div style={{fontSize:11,color:THEME.textMuted,marginBottom:6}}>{currentUser.email}</div>
          <span style={{...css.badge(currentUser.role==='admin'?THEME.accent:THEME.purple),fontSize:11}}>{currentUser.role}</span>
          <div style={{marginTop:10}}>
            <button style={{...css.btn('danger'),padding:'4px 12px',fontSize:12,width:'100%'}} onClick={handleLogout}>Sign Out</button>
          </div>
        </div>
      </div>
      <main style={css.main}>{renderPage()}</main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);