const { useState, useEffect } = React;

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 token = getToken();
  const isFormData = opts.body instanceof FormData;
  const headers = isFormData
    ? { ...(opts.headers||{}) }
    : { 'Content-Type':'application/json', ...(opts.headers||{}) };
  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()),
  deleteCourse:   (id) => authFetch(`/api/courses/${id}`,{method:'DELETE'}).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()),
};

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', flexDirection:'row' },
  sidebar: { width:240, background:THEME.surface, borderRight:`1px solid ${THEME.border}`, display:'flex', flexDirection:'column', flexShrink:0, height:'100vh', position:'sticky', top:0, overflowY:'auto' },
  main:    { flex:1, overflow:'auto', padding:'32px 36px', minWidth:0 },
  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: window.innerWidth < 768 ? '10px 8px' : '12px 14px', fontSize: window.innerWidth < 768 ? 12 : 13, borderBottom:`1px solid ${THEME.border}22` },
  grid:    (c) => ({ display:'grid', gridTemplateColumns: window.innerWidth < 768 ? '1fr' : `repeat(${c},1fr)`, gap: window.innerWidth < 768 ? 12 : 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' }),
};

// ── LOGO component ← LOGO ─────────────────────────────────
function AsiaAILogo({ size = 72 }) {
  return (
    <img
      src="/logo.svg"
      alt="Asia AI"
      style={{ width:size, height:'auto', display:'block' }}
      onError={e => { e.target.style.display='none'; }}
    />
  );
}

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>
  );
}

// ── IMAGE UPLOADER ───────────────────────────────────────
function ImageUploader({ value, onChange, label, placeholder, preview='cover' }) {
  const [uploading, setUploading] = React.useState(false);
  const [drag, setDrag] = React.useState(false);
  const inputRef = React.useRef();

  const doUpload = async (file) => {
    if (!file) return;
    const allowed = ['image/jpeg','image/png','image/gif','image/webp','image/svg+xml'];
    if (!allowed.includes(file.type)) return alert('Please upload an image file (JPG, PNG, GIF, WebP, SVG)');
    if (file.size > 10*1024*1024) return alert('File too large. Maximum 10MB.');
    setUploading(true);
    try {
      const fd = new FormData();
      fd.append('image', file);
      const token = localStorage.getItem('crm_token');
      const res = await fetch('/api/pictures/upload', {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${token}` },
        body: fd
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Upload failed');
      onChange('https://asia-ai.org' + data.url);
    } catch(e) { alert('Upload failed: ' + e.message); }
    setUploading(false);
  };

  const handleDrop = (e) => {
    e.preventDefault(); setDrag(false);
    const file = e.dataTransfer.files[0];
    if (file) doUpload(file);
  };

  const thumbStyle = preview === 'avatar'
    ? {width:48,height:48,borderRadius:'50%',objectFit:'cover',border:`1px solid ${THEME.border}`}
    : preview === 'logo'
    ? {height:40,maxWidth:120,objectFit:'contain',borderRadius:4,background:'#fff',padding:3}
    : {width:'100%',height:80,objectFit:'cover',borderRadius:6};

  return (
    <div style={{display:'flex',flexDirection:'column',gap:6}}>
      {label && <label style={css.label}>{label}</label>}
      <div style={{display:'flex',gap:8,alignItems:'center'}}>
        {value && <img src={value} alt="preview" style={thumbStyle} onError={e=>e.target.style.display='none'}/>}
        <div style={{flex:1,display:'flex',flexDirection:'column',gap:6}}>
          <input
            style={css.input}
            placeholder={placeholder||'https://... or upload below'}
            value={value||''}
            onChange={e=>onChange(e.target.value)}
          />
          <div
            style={{
              border:`1px dashed ${drag?THEME.accent:THEME.border}`,
              borderRadius:6,padding:'8px 12px',
              background:drag?`${THEME.accent}11`:THEME.surfaceAlt,
              cursor:'pointer',fontSize:12,color:THEME.textMuted,
              textAlign:'center',transition:'all .15s'
            }}
            onClick={()=>!uploading&&inputRef.current.click()}
            onDragOver={e=>{e.preventDefault();setDrag(true);}}
            onDragLeave={()=>setDrag(false)}
            onDrop={handleDrop}
          >
            {uploading
              ? '⏳ Uploading...'
              : '📁 Click to upload or drag & drop — JPG, PNG, GIF, WebP, SVG (max 10MB)'}
          </div>
          <input ref={inputRef} type="file" accept="image/*" style={{display:'none'}}
            onChange={e=>doUpload(e.target.files[0])}/>
        </div>
      </div>
    </div>
  );
}

// ── LOGIN ─────────────────────────────────────────────────
function LoginScreen({ onLogin }) {
  const [showForgot, setShowForgot] = React.useState(false);
  const [forgotEmail, setForgotEmail] = React.useState('');
  const [forgotSent, setForgotSent] = React.useState(false);
  const [forgotLoading, setForgotLoading] = React.useState(false);

  const sendForgot = async () => {
    if (!forgotEmail) return;
    setForgotLoading(true);
    try {
      await fetch('/api/auth/forgot-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: forgotEmail })
      });
      setForgotSent(true);
    } catch(e) {}
    setForgotLoading(false);
  };

  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) { setError(data.error||'Login failed.'); setLoading(false); return; }
      saveAuth(data.token,data.user);
      window.location.href = '/members';
    } catch { setError('Connection error. Please try again.'); setLoading(false); }
  };

  if (showForgot) return (
    <div style={{minHeight:'100vh',background:THEME.bg,display:'flex',alignItems:'center',justifyContent:'center',padding:20}}>
      <div style={{background:THEME.surface,border:`1px solid ${THEME.border}`,borderRadius:16,padding:40,width:'100%',maxWidth:420}}>
        <div style={{textAlign:'center',marginBottom:28}}>
          <img src="/pictures/aaa_logo.png" alt="Asia AI" style={{height:56,marginBottom:12}}/>
          <h2 style={{fontSize:20,fontWeight:700,color:THEME.text}}>Reset your password</h2>
          <p style={{fontSize:13,color:THEME.textMuted,marginTop:6}}>Enter your email and we'll send a reset link</p>
        </div>
        {forgotSent ? (
          <div>
            <div style={{background:'#0F3D2E',border:'1px solid #1D9E75',borderRadius:8,padding:16,color:'#4ADE80',fontSize:14,textAlign:'center',marginBottom:20}}>
              Check your email for a reset link. It expires in 1 hour.
            </div>
            <button style={{width:'100%',padding:12,background:THEME.accent,color:'#fff',border:'none',borderRadius:8,fontSize:15,fontWeight:700,cursor:'pointer',fontFamily:'inherit'}}
              onClick={()=>{setShowForgot(false);setForgotSent(false);setForgotEmail('');}}>
              Back to login
            </button>
          </div>
        ) : (
          <div>
            <div style={{marginBottom:16}}>
              <label style={{fontSize:13,color:THEME.textMuted,display:'block',marginBottom:6}}>Email address</label>
              <input style={{...{width:'100%',padding:'12px 14px',background:THEME.bg,border:`1px solid ${THEME.border}`,borderRadius:8,color:THEME.text,fontSize:14,fontFamily:'inherit',outline:'none'}}}
                type="email" placeholder="your@email.com" value={forgotEmail}
                onChange={e=>setForgotEmail(e.target.value)}
                onKeyDown={e=>e.key==='Enter'&&sendForgot()}/>
            </div>
            <button style={{width:'100%',padding:12,background:THEME.accent,color:'#fff',border:'none',borderRadius:8,fontSize:15,fontWeight:700,cursor:'pointer',fontFamily:'inherit'}}
              onClick={sendForgot} disabled={forgotLoading||!forgotEmail}>
              {forgotLoading?'Sending...':'Send reset link'}
            </button>
            <div style={{textAlign:'center',marginTop:14}}>
              <button type="button" onClick={()=>setShowForgot(false)}
                style={{background:'none',border:'none',color:THEME.textMuted,fontSize:13,cursor:'pointer',textDecoration:'underline',fontFamily:'inherit'}}>
                Back to login
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );


  return (
    <div style={{minHeight:'100vh',background:THEME.bg,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:"'DM Sans',sans-serif"}}>
      <div style={{width:420}}>
        <div style={{textAlign:'center',marginBottom:32,display:'flex',flexDirection:'column',alignItems:'center',gap:8}}>
          <a href="https://asia-ai.org" style={{textDecoration:'none',display:'flex',flexDirection:'column',alignItems:'center',gap:8}}>
            <AsiaAILogo size={100}/>
            <div style={{fontSize:22,fontWeight:800,color:THEME.accent,letterSpacing:'-0.02em'}}>Asia AI</div>
            <div style={{fontSize:13,color:THEME.textMuted}}>Association Platform</div>
          </a>
        </div>
        <div style={{...css.card({padding:32}),border:`1px solid ${THEME.accent}33`}}>
          <h2 style={{...css.h2,marginBottom:24,textAlign:'center',color:THEME.text}}>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>}
          <form autoComplete="on" onSubmit={e=>{e.preventDefault();handleLogin();}} style={{margin:0}}>
            <div style={{marginBottom:16}}>
              <label style={css.label}>Email address</label>
              <input style={css.input} type="email" name="email" autoComplete="username email"
                placeholder="your@email.com" value={form.email}
                onChange={e=>setForm(f=>({...f,email:e.target.value}))}/>
            </div>
            <div style={{marginBottom:24}}>
              <label style={css.label}>Password</label>
              <input style={css.input} type="password" name="password" autoComplete="current-password"
                placeholder="••••••••" value={form.password}
                onChange={e=>setForm(f=>({...f,password:e.target.value}))}/>
            </div>
            <button type="submit" style={{...css.btn(),width:'100%',padding:'12px',fontSize:15,background:THEME.accent,color:'#ffffff',border:'none',fontWeight:700,letterSpacing:'.02em'}} disabled={loading}>
              {loading?'Signing in…':'Sign In'}
            </button>
            <div style={{textAlign:'center',marginTop:14}}>
              <button type="button"
                onClick={()=>setShowForgot(true)}
                style={{background:'none',border:'none',color:THEME.textMuted,fontSize:13,cursor:'pointer',textDecoration:'underline',fontFamily:'inherit'}}>
                Forgot password?
              </button>
            </div>
          </form>
        </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 [editMember,setEditMember] = useState(null);
  const [saving,setSaving]     = useState(false);
  const emptyForm = {type:'individual',name:'',email:'',phone:'',plan:'Basic',
    contact_person:'',seats:1,status:'active',paid:true,
    joined_date:new Date().toISOString().slice(0,10),
    renewal_date:new Date(Date.now()+365*86400000).toISOString().slice(0,10),
    ceased_date:'',notes:'',corporate_members:[{name:'',photo:''}],website:'',company_logo:''};
  const [form,setForm] = useState(emptyForm);
  const plans = { individual:['Basic','Standard','Premium'], corporate:['Bronze','Silver','Gold'] };
  const filtered = members.filter(m=>(tab==='all'||m.type===tab)&&
    (m.name.toLowerCase().includes(search.toLowerCase())||
     m.email.toLowerCase().includes(search.toLowerCase())));

  const openAdd = () => { setForm(emptyForm); setEditMember(null); setShowForm(true); };
  const openEdit = (m) => {
    setForm({
      type: m.type||'individual', name: m.name||'', email: m.email||'',
      phone: m.phone||'', plan: m.plan||'Basic', contact_person: m.contact_person||'',
      seats: m.seats||1, status: m.status||'active', paid: m.paid!==false,
      joined_date: m.joined_date ? m.joined_date.slice(0,10) : (m.joined||''),
      renewal_date: m.renewal_date ? m.renewal_date.slice(0,10) : '',
      ceased_date: m.ceased_date ? m.ceased_date.slice(0,10) : '',
      notes: m.notes||'',
      corporate_members: (m.corporate_members||[]).map(x=>typeof x==='string'?{name:x,photo:''}:x),
      website: m.website||'',
      company_logo: m.company_logo||'',
      member_photos: m.member_photos||[]
    });
    setEditMember(m);
    setShowForm(true);
  };

  const handleSave = async () => {
    if (!form.name||!form.email) return alert('Name and email are required.');
    setSaving(true);
    try {
      // Normalize corporate_members - filter empty, ensure plain objects
      const cleanMembers = form.type==='corporate'
        ? (form.corporate_members||[])
            .filter(m => m && m.name && m.name.trim())
            .map(m => ({
              name: (m.name||'').trim(),
              photo: (m.photo||'').trim()
            }))
        : form.corporate_members;
      const payload = {...form, corporate_members: cleanMembers};
      if (editMember) {
        const updated = await api.updateMember(editMember.id, payload);
        setMembers(ms=>ms.map(m=>m.id===editMember.id?{...m,...updated}:m));
      } else {
        const m = await api.addMember(form);
        setMembers(ms=>[m,...ms]);
      }
      setShowForm(false); setEditMember(null); setForm(emptyForm);
    } 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));
  };

  const renderMemberForm = () => (
    <div style={{...css.card({marginBottom:20,background:THEME.surfaceAlt,border:`1px solid ${THEME.accent}44`})}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
        <h2 style={{...css.h2,color:THEME.accent}}>{editMember?'✏️ Edit Member':'➕ Add Member (No Payment Required)'}</h2>
        <button style={css.btn('ghost')} onClick={()=>{setShowForm(false);setEditMember(null);}}>✕</button>
      </div>
      <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'}))}>
            <option value="individual">Individual</option>
            <option value="corporate">Corporate</option>
          </select></div>
        <div><label style={css.label}>{form.type==='corporate'?'Organisation':'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} 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>
        {form.type==='corporate'&&<div><label style={css.label}>Company Website</label><input style={css.input} placeholder="https://company.com" value={form.website||''} onChange={e=>setForm(f=>({...f,website: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="active">Active</option>
            <option value="pending">Pending</option>
            <option value="expired">Expired</option>
            <option value="ceased">Ceased</option>
          </select></div>
        <div><label style={css.label}>Payment</label>
          <select style={css.input} value={form.paid?'true':'false'} onChange={e=>setForm(f=>({...f,paid:e.target.value==='true'}))}>
            <option value="true">Paid</option>
            <option value="false">Unpaid</option>
          </select></div>
        <div><label style={css.label}>Joined Date</label>
          <input style={css.input} type="date" value={form.joined_date} onChange={e=>setForm(f=>({...f,joined_date:e.target.value}))}/></div>
        <div><label style={css.label}>Renewal Date</label>
          <input style={css.input} type="date" value={form.renewal_date} onChange={e=>setForm(f=>({...f,renewal_date:e.target.value}))}/></div>
        <div><label style={css.label}>Ceased Date</label>
          <input style={css.input} type="date" value={form.ceased_date} onChange={e=>setForm(f=>({...f,ceased_date:e.target.value||null}))}/></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 style={{gridColumn:'1/-1'}}><label style={css.label}>Notes</label>
          <input style={css.input} placeholder="Internal notes (optional)" value={form.notes} onChange={e=>setForm(f=>({...f,notes:e.target.value}))}/></div>
        {form.type==='corporate'&&<div style={{gridColumn:'1/-1'}}>
          <ImageUploader label="Company Logo" preview="logo"
            placeholder="https://company.com/logo.png or upload"
            value={form.company_logo||''}
            onChange={v=>setForm(f=>({...f,company_logo:v}))}/>
        </div>}
        {form.type==='corporate'&&<div style={{gridColumn:'1/-1'}}>
          <label style={css.label}>Corporate Members (up to 10)</label>
          <div style={{display:'flex',flexDirection:'column',gap:8,marginTop:4}}>
            {(form.corporate_members||[{name:'',photo:''}]).slice(0,10).map((cm,idx)=>(
              <div key={idx} style={{display:'flex',gap:8,alignItems:'center'}}>
                <div style={{width:32,height:32,borderRadius:'50%',overflow:'hidden',flexShrink:0,background:THEME.surfaceAlt,border:`1px solid ${THEME.border}`,display:'flex',alignItems:'center',justifyContent:'center'}}>
                  {cm.photo?<img src={cm.photo} alt={cm.name} style={{width:'100%',height:'100%',objectFit:'cover'}} onError={e=>e.target.style.display='none'}/>:<span style={{fontSize:12,color:THEME.textMuted}}>{idx+1}</span>}
                </div>
                <input style={{...css.input,flex:2}} placeholder={`Member ${idx+1} name`} value={cm.name||''} onChange={e=>{const a=[...(form.corporate_members||[])];while(a.length<=idx)a.push({name:'',photo:''});a[idx]={...a[idx],name:e.target.value};setForm(f=>({...f,corporate_members:a}));}}/>
                <div style={{flex:3}}>
                  <ImageUploader preview="avatar"
                    placeholder="Photo URL or upload"
                    value={cm.photo||''}
                    onChange={v=>{const a=[...(form.corporate_members||[])];while(a.length<=idx)a.push({name:'',photo:''});a[idx]={...a[idx],photo:v};setForm(f=>({...f,corporate_members:a}));}}/>
                </div>
                {idx>0&&<button style={{...css.btn('danger'),padding:'4px 8px',fontSize:11,flexShrink:0}} onClick={()=>setForm(f=>({...f,corporate_members:f.corporate_members.filter((_,i)=>i!==idx)}))}>✕</button>}
              </div>
            ))}
            {(form.corporate_members||[]).filter(m=>m.name).length<10&&(
              <button style={{...css.btn('ghost'),padding:'6px 12px',fontSize:12,alignSelf:'flex-start'}} onClick={()=>setForm(f=>({...f,corporate_members:[...(f.corporate_members||[]),{name:'',photo:''}]}))}>+ Add Member</button>
            )}
            <div style={{fontSize:11,color:THEME.textMuted}}>{(form.corporate_members||[]).filter(m=>m.name).length}/10 members</div>
          </div>
        </div>}
      </div>
      <div style={{display:'flex',gap:10,marginTop:16}}>
        <button style={css.btn()} onClick={handleSave} disabled={saving}>{saving?'Saving…':editMember?'Save Changes':'Add Member'}</button>
        <button style={css.btn('ghost')} onClick={()=>{setShowForm(false);setEditMember(null);}}>Cancel</button>
      </div>
    </div>
  );

  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}}>
            {members.length} total · {members.filter(m=>m.status==='active').length} active · {members.filter(m=>m.status==='pending').length} pending
          </p>
        </div>
        <button style={css.btn()} onClick={openAdd}>+ Add Member</button>
      </div>
      <div style={{display:'flex',gap:8,marginBottom:20,flexWrap:'wrap'}}>
        {['all','individual','corporate'].map(t=>(
          <button key={t} onClick={()=>setTab(t)} style={{...css.btn(tab===t?'primary':'ghost'),textTransform:'capitalize'}}>
            {t} ({t==='all'?members.length:members.filter(m=>m.type===t).length})
          </button>
        ))}
        <input placeholder="Search name or email…" style={{...css.input,width:220,marginLeft:'auto'}} value={search} onChange={e=>setSearch(e.target.value)}/>
      </div>

      {showForm && renderMemberForm()}

      <div style={css.card({padding:0,overflow:'hidden'})}>
        <table style={{width:'100%',borderCollapse:'collapse'}}>
          <thead><tr style={{background:THEME.surfaceAlt}}>
            {['Name & Email','Type','Plan','Status','Joined','Renewal','Ceased','Paid',''].map(h=>(
              <th key={h} style={css.th}>{h}</th>
            ))}
          </tr></thead>
          <tbody>
            {filtered.map(m=>(
              <tr key={m.id} style={{cursor:'pointer'}} onMouseEnter={e=>e.currentTarget.style.background=THEME.surfaceAlt} onMouseLeave={e=>e.currentTarget.style.background=''}>
                <td style={css.td}>
                  <div style={{fontWeight:600}}>{m.name}</div>
                  <div style={{fontSize:11,color:THEME.textMuted}}>{m.email}</div>
                  {m.phone&&<div style={{fontSize:11,color:THEME.textMuted}}>{m.phone}</div>}
                  {m.contact_person&&<div style={{fontSize:11,color:THEME.textMuted}}>c/o {m.contact_person}</div>}
                  {m.website&&<div style={{fontSize:11,marginTop:2}}><a href={m.website} target="_blank" style={{color:THEME.accent}}>{m.website.replace(/^https?:\/\//,'')}</a></div>}
                  {m.type==='corporate'&&m.company_logo&&<img src={m.company_logo} alt="logo" style={{height:20,marginTop:2,borderRadius:2}} onError={e=>e.target.style.display='none'}/>}
                  {m.type==='corporate'&&m.corporate_members&&m.corporate_members.length>0&&(
                    <div style={{display:'flex',gap:4,marginTop:4,flexWrap:'wrap',alignItems:'center'}}>
                      {m.corporate_members.map(x=>{
                          if(typeof x==='string'){try{const p=JSON.parse(x);return p;}catch(e){return{name:x,photo:''};}}
                          if(x&&x.name&&x.name.startsWith('{')){try{return JSON.parse(x.name);}catch(e){}}
                          return x;
                        }).filter(x=>x&&x.name&&!x.name.startsWith('{')).slice(0,5).map((cm,i)=>(
                        <div key={i} style={{display:'flex',alignItems:'center',gap:3,background:THEME.surfaceAlt,borderRadius:10,padding:'2px 6px'}}>
                          {cm.photo&&<img src={cm.photo} alt={cm.name} style={{width:14,height:14,borderRadius:'50%',objectFit:'cover'}} onError={e=>e.target.style.display='none'}/>}
                          <span style={{fontSize:10,color:THEME.textMuted}}>{cm.name}</span>
                        </div>
                      ))}
                      {m.corporate_members.length>5&&<span style={{fontSize:10,color:THEME.textMuted}}>+{m.corporate_members.length-5} more</span>}
                    </div>
                  )}
                  {m.notes&&<div style={{fontSize:11,color:THEME.gold,fontStyle:'italic',marginTop:2}}>{m.notes}</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,fontSize:12}}>{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.joined_date||m.joined)}</td>
                <td style={{...css.td,color:THEME.textMuted,fontSize:12}}>{fmtDate(m.renewal_date)}</td>
                <td style={{...css.td,color:m.ceased_date?THEME.danger:THEME.textMuted,fontSize:12}}>{m.ceased_date?fmtDate(m.ceased_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}>
                  <div style={{display:'flex',gap:6}}>
                    <button style={{...css.btn('ghost'),padding:'4px 10px',fontSize:12}} onClick={()=>openEdit(m)}>✏️ Edit</button>
                    <button style={{...css.btn('danger'),padding:'4px 10px',fontSize:12}} onClick={()=>handleDelete(m.id)}>✕</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {filtered.length===0&&<div style={{textAlign:'center',padding:32,color:THEME.textMuted}}>No members found.</div>}
      </div>
    </div>
  );
}

// ── COURSES ← DELETE COURSE added ────────────────────────
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); setForm({title:'',category:'Leadership',duration:'1 day',fee:'',max_seats:20,start_date:'',instructor:'',description:''}); }
    catch(e) { alert('Error: '+e.message); }
    setSaving(false);
  };

  const handleDeleteCourse = async (id) => {
    if (!confirm('Delete this course? All enrolments linked to it will also be removed.')) return;
    try { await api.deleteCourse(id); setCourses(cs=>cs.filter(c=>c.id!==id)); }
    catch(e) { alert('Error deleting course: '+e.message); }
  };

  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:16}}>
        <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>

      {/* Academy sync banner */}
      <div style={{background:'#A78BFA22',border:'1px solid #A78BFA44',borderRadius:10,padding:'12px 16px',marginBottom:24,display:'flex',alignItems:'center',justifyContent:'space-between',gap:12,flexWrap:'wrap'}}>
        <div style={{display:'flex',alignItems:'center',gap:10}}>
          <span style={{fontSize:20}}>🎓</span>
          <div>
            <div style={{fontSize:13,fontWeight:700,color:'#A78BFA'}}>AI Academy Integration</div>
            <div style={{fontSize:12,color:THEME.textMuted}}>Courses listed here are accessible to members from the AI Academy subpage. Add courses below to sync with the Academy.</div>
          </div>
        </div>
        <a href="/academy" target="_blank" style={{background:'#A78BFA',color:'#fff',padding:'7px 14px',borderRadius:8,fontSize:12,fontWeight:700,textDecoration:'none',whiteSpace:'nowrap'}}>View Academy Page →</a>
      </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>
              <div style={{display:'flex',gap:6,alignItems:'center'}}>
                <span style={css.badge(statusColor[course.status])}>{course.status}</span>
                <button style={{...css.btn('danger'),padding:'3px 10px',fontSize:11}} onClick={()=>handleDeleteCourse(course.id)}>Delete</button>
              </div>
            </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, setEnrollments }) {
  const [filter, setFilter] = useState('all');
  const [search, setSearch] = useState('');

  const filtered = enrollments.filter(e => {
    const mf = filter==='all' || (filter==='member'&&e.is_member) || (filter==='guest'&&!e.is_member);
    const q  = search.toLowerCase();
    const mq = !q || (e.member_name||'').toLowerCase().includes(q) ||
               (e.member_email||'').toLowerCase().includes(q) ||
               (e.course_title||'').toLowerCase().includes(q);
    return mf && mq;
  });

  const markPaid = async (id) => {
    const res = await authFetch(`/api/enrollments/${id}/paid`,{method:'PUT',body:JSON.stringify({status:'confirmed'})}).then(r=>r.json());
    if (res.id || res.success) {
      setEnrollments(es => es.map(e => e.id===id ? {...e, status:'confirmed', paid:true} : e));
    }
  };

  const memberCount = enrollments.filter(e=>e.is_member).length;
  const guestCount  = enrollments.filter(e=>!e.is_member).length;
  const totalRev    = enrollments.reduce((s,e)=>s+Number(e.amount||0),0);

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
        <div><h1 style={css.h1}>Enrolments</h1><p style={{color:THEME.textMuted,margin:'4px 0 0',fontSize:14}}>Members and public course enrolments</p></div>
      </div>

      {/* Summary stats */}
      <div style={{...css.grid(4),marginBottom:20}}>
        {[
          ['Total Enrolments', enrollments.length, THEME.accent,   '🎓'],
          ['Members',          memberCount,         THEME.purple,   '🏅'],
          ['Guests',           guestCount,          THEME.gold,     '👤'],
          ['Total Revenue',    fmt(totalRev),        THEME.success,  '💰'],
        ].map(([l,v,c,ic])=>(
          <div key={l} style={{...css.card(),borderLeft:`3px solid ${c}`,display:'flex',gap:10,alignItems:'center'}}>
            <span style={{fontSize:24}}>{ic}</span>
            <div><div style={{fontSize:20,fontWeight:800,color:c}}>{v}</div><div style={{fontSize:12,color:THEME.textMuted}}>{l}</div></div>
          </div>
        ))}
      </div>

      {/* Filters */}
      <div style={{display:'flex',gap:8,marginBottom:16,flexWrap:'wrap'}}>
        {['all','member','guest'].map(f=>(
          <button key={f} style={{...css.btn(filter===f?'primary':'ghost'),textTransform:'capitalize',fontSize:12}} onClick={()=>setFilter(f)}>
            {f==='member'?'🏅 Members':f==='guest'?'👤 Guests':'All'}
          </button>
        ))}
        <input placeholder="Search name, email, course…" style={{...css.input,width:240,marginLeft:'auto'}} value={search} onChange={e=>setSearch(e.target.value)}/>
      </div>

      <div style={css.card({padding:0,overflow:'hidden'})}>
        <table style={{width:'100%',borderCollapse:'collapse'}}>
          <thead><tr style={{background:THEME.surfaceAlt}}>
            {['Student','Type','Course','Date','Original','Discount','Paid','Method','Status',''].map(h=><th key={h} style={css.th}>{h}</th>)}
          </tr></thead>
          <tbody>
            {filtered.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>
                  {e.guest_org&&<div style={{fontSize:11,color:THEME.textMuted}}>{e.guest_org}</div>}
                </td>
                <td style={css.td}>
                  <span style={css.badge(e.is_member?THEME.purple:THEME.gold)}>
                    {e.is_member?'🏅 Member':'👤 Guest'}
                  </span>
                </td>
                <td style={css.td}>
                  <div style={{fontWeight:600,fontSize:13}}>{e.course_title}</div>
                  <div style={{fontSize:11,color:THEME.textMuted}}>{e.course_category}</div>
                </td>
                <td style={{...css.td,fontSize:11,color:THEME.textMuted}}>{fmtDate(e.enrolled_on)}</td>
                <td style={{...css.td,fontSize:12,color:THEME.textMuted}}>{e.original_fee?fmt(e.original_fee):'—'}</td>
                <td style={css.td}>
                  {e.discount_pct>0
                    ? <span style={css.badge(THEME.success)}>{e.discount_pct}% off</span>
                    : <span style={{fontSize:12,color:THEME.textMuted}}>—</span>}
                </td>
                <td style={{...css.td,fontWeight:700,color:THEME.gold}}>{fmt(e.amount)}</td>
                <td style={css.td}>
                  {e.payment_method&&e.payment_method!=='pending'
                    ? <span style={css.badge(THEME.purple)}>{e.payment_method}</span>
                    : <span style={css.badge(THEME.gold)}>Pending</span>}
                </td>
                <td style={css.td}><span style={css.badge(statusColor[e.status]||THEME.textMuted)}>{e.status}</span></td>
                <td style={css.td}>
                  {e.status==='pending'&&(
                    <button style={{...css.btn(),padding:'4px 10px',fontSize:11}} onClick={()=>markPaid(e.id)}>
                      ✓ Confirm
                    </button>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {filtered.length===0&&<div style={{textAlign:'center',padding:32,color:THEME.textMuted}}>No enrolments found.</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({ currentUser }) {
  const [users, setUsers]         = useState([]);
  const [showForm, setShowForm]   = useState(false);
  const [editUser, setEditUser]   = useState(null);
  const [saving, setSaving]       = useState(false);
  const [msg, setMsg]             = useState(null);
  const [form, setForm]           = useState({ name:'', email:'', password:'', role:'staff' });
  const [pwForm, setPwForm]       = useState({ current_password:'', new_password:'', confirm_password:'' });
  const [showPwForm, setShowPwForm] = useState(false);
  const isAdmin = currentUser.role === 'admin';

  useEffect(() => { loadUsers(); }, []);

  const loadUsers = () => {
    api.getUsers().then(data => setUsers(Array.isArray(data) ? data : [])).catch(() => {});
  };

  const showMsg = (text, ok=true) => {
    setMsg({ text, ok });
    setTimeout(() => setMsg(null), 3500);
  };

  // ── Admin: Add new user ──────────────────────────────────
  const handleAdd = async () => {
    if (!form.name || !form.email || !form.password) return showMsg('All fields required.', false);
    if (form.password.length < 8) return showMsg('Password must be at least 8 characters.', false);
    setSaving(true);
    try {
      const u = await api.addUser(form);
      if (u.error) return showMsg(u.error, false);
      setUsers(us => [u, ...us]);
      setShowForm(false);
      setForm({ name:'', email:'', password:'', role:'staff' });
      showMsg('User created successfully.');
    } catch(e) { showMsg('Error: ' + e.message, false); }
    setSaving(false);
  };

  // ── Admin: Update user details ───────────────────────────
  const handleUpdate = async () => {
    if (!editUser.name || !editUser.email) return showMsg('Name and email required.', false);
    setSaving(true);
    try {
      const payload = { name:editUser.name, email:editUser.email, role:editUser.role, active:editUser.active };
      if (editUser.new_password) {
        if (editUser.new_password.length < 8) { showMsg('Password must be at least 8 characters.', false); setSaving(false); return; }
        payload.password = editUser.new_password;
      }
      const updated = await api.updateUser(editUser.id, payload);
      if (updated.error) return showMsg(updated.error, false);
      setUsers(us => us.map(u => u.id === editUser.id ? { ...u, ...updated } : u));
      setEditUser(null);
      showMsg('User updated successfully.');
    } catch(e) { showMsg('Error: ' + e.message, false); }
    setSaving(false);
  };

  // ── Admin: Toggle active ─────────────────────────────────
  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));
    showMsg(`User ${updated.active ? 'enabled' : 'disabled'}.`);
  };

  // ── Admin: Delete user ───────────────────────────────────
  const handleDelete = async (id) => {
    if (!confirm('Delete this user? This cannot be undone.')) return;
    await api.deleteUser(id);
    setUsers(us => us.filter(u => u.id !== id));
    showMsg('User deleted.');
  };

  // ── Self-service: change own password ───────────────────
  const handleChangePassword = async () => {
    if (!pwForm.current_password || !pwForm.new_password || !pwForm.confirm_password)
      return showMsg('All password fields are required.', false);
    if (pwForm.new_password !== pwForm.confirm_password)
      return showMsg('New passwords do not match.', false);
    if (pwForm.new_password.length < 8)
      return showMsg('New password must be at least 8 characters.', false);
    setSaving(true);
    try {
      const token = localStorage.getItem('crm_token');
      const res = await fetch('/api/users/me/password', {
        method:'PUT',
        headers:{ 'Content-Type':'application/json', Authorization:`Bearer ${token}` },
        body: JSON.stringify({ current_password:pwForm.current_password, new_password:pwForm.new_password }),
      });
      const data = await res.json();
      if (!res.ok) return showMsg(data.error || 'Failed to update password.', false);
      setShowPwForm(false);
      setPwForm({ current_password:'', new_password:'', confirm_password:'' });
      showMsg('Password changed successfully.');
    } catch(e) { showMsg('Error: ' + e.message, false); }
    setSaving(false);
  };

  // ── Self-service: update own profile ────────────────────
  const handleUpdateSelf = async () => {
    if (!editUser.name || !editUser.email) return showMsg('Name and email required.', false);
    setSaving(true);
    try {
      const updated = await api.updateUser(currentUser.id, { name:editUser.name, email:editUser.email, role:currentUser.role, active:true });
      if (updated.error) return showMsg(updated.error, false);
      setUsers(us => us.map(u => u.id === currentUser.id ? { ...u, ...updated } : u));
      setEditUser(null);
      showMsg('Profile updated successfully.');
    } catch(e) { showMsg('Error: ' + e.message, false); }
    setSaving(false);
  };

  const myProfile = users.find(u => u.id === currentUser.id);

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:24}}>
        <div>
          <h1 style={css.h1}>{isAdmin ? 'User Management' : 'My Profile'}</h1>
          <p style={{color:THEME.textMuted,margin:'4px 0 0',fontSize:14}}>
            {isAdmin ? 'Manage portal access, roles and user details' : 'Update your profile details and change your password'}
          </p>
        </div>
        {isAdmin && <button style={css.btn()} onClick={()=>setShowForm(true)}>+ Add User</button>}
      </div>

      {/* Message banner */}
      {msg && (
        <div style={{background:msg.ok?THEME.success+'22':THEME.danger+'22',border:`1px solid ${msg.ok?THEME.success:THEME.danger}44`,borderRadius:8,padding:'10px 16px',marginBottom:20,fontSize:13,color:msg.ok?THEME.success:THEME.danger,fontWeight:500}}>
          {msg.ok ? '✓' : '✕'} {msg.text}
        </div>
      )}

      {/* ── My Profile card (visible to all users) ── */}
      {myProfile && (
        <div style={{...css.card({marginBottom:24,border:`1px solid ${THEME.accent}33`,background:THEME.surfaceAlt})}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:16}}>
            <h2 style={{...css.h2,color:THEME.accent}}>My Profile</h2>
            <div style={{display:'flex',gap:8}}>
              <button style={{...css.btn('ghost'),padding:'6px 14px',fontSize:12}} onClick={()=>setEditUser({...myProfile,new_password:''})}>✏️ Edit Profile</button>
              <button style={{...css.btn('gold'),padding:'6px 14px',fontSize:12}} onClick={()=>setShowPwForm(!showPwForm)}>🔑 Change Password</button>
            </div>
          </div>
          <div style={css.grid(4)}>
            {[['Name',myProfile.name],['Email',myProfile.email],['Role',myProfile.role],['Last Login',fmtDate(myProfile.last_login)||'—']].map(([k,v])=>(
              <div key={k} style={{background:THEME.surface,borderRadius:8,padding:'10px 14px'}}>
                <div style={{fontSize:11,color:THEME.textMuted,marginBottom:3}}>{k}</div>
                <div style={{fontSize:13,fontWeight:600,textTransform:'capitalize'}}>{v}</div>
              </div>
            ))}
          </div>

          {/* Change password form */}
          {showPwForm && (
            <div style={{marginTop:20,paddingTop:20,borderTop:`1px solid ${THEME.border}`}}>
              <h3 style={{fontSize:14,fontWeight:700,marginBottom:14,color:THEME.gold}}>Change Password</h3>
              <div style={css.grid(3)}>
                <div>
                  <label style={css.label}>Current Password</label>
                  <input style={css.input} type="password" placeholder="Current password" value={pwForm.current_password}
                    onChange={e=>setPwForm(f=>({...f,current_password:e.target.value}))}/>
                </div>
                <div>
                  <label style={css.label}>New Password</label>
                  <input style={css.input} type="password" placeholder="Min 8 characters" value={pwForm.new_password}
                    onChange={e=>setPwForm(f=>({...f,new_password:e.target.value}))}/>
                </div>
                <div>
                  <label style={css.label}>Confirm New Password</label>
                  <input style={css.input} type="password" placeholder="Repeat new password" value={pwForm.confirm_password}
                    onChange={e=>setPwForm(f=>({...f,confirm_password:e.target.value}))}/>
                </div>
              </div>
              <div style={{display:'flex',gap:10,marginTop:14}}>
                <button style={css.btn('gold')} onClick={handleChangePassword} disabled={saving}>{saving?'Saving…':'Update Password'}</button>
                <button style={css.btn('ghost')} onClick={()=>{setShowPwForm(false);setPwForm({current_password:'',new_password:'',confirm_password:''});}}>Cancel</button>
              </div>
            </div>
          )}
        </div>
      )}

      {/* ── Edit user modal (admin editing any user, or self editing own profile) ── */}
      {editUser && (
        <div style={{position:'fixed',inset:0,background:'#00000088',zIndex:100,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div style={{...css.card({width:500,background:THEME.surface}),border:`1px solid ${THEME.accent}44`}}>
            <h2 style={{...css.h2,color:THEME.accent,marginBottom:20}}>
              {editUser.id === currentUser.id ? '✏️ Edit My Profile' : `✏️ Edit: ${editUser.name}`}
            </h2>
            <div style={css.grid(2)}>
              <div>
                <label style={css.label}>Full Name</label>
                <input style={css.input} value={editUser.name} onChange={e=>setEditUser(u=>({...u,name:e.target.value}))}/>
              </div>
              <div>
                <label style={css.label}>Email</label>
                <input style={css.input} type="email" value={editUser.email} onChange={e=>setEditUser(u=>({...u,email:e.target.value}))}/>
              </div>
              {isAdmin && editUser.id !== currentUser.id && (
                <>
                  <div>
                    <label style={css.label}>Role</label>
                    <select style={css.input} value={editUser.role} onChange={e=>setEditUser(u=>({...u,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>
                    <label style={css.label}>Status</label>
                    <select style={css.input} value={editUser.active} onChange={e=>setEditUser(u=>({...u,active:e.target.value==='true'}))}>
                      <option value="true">Active</option>
                      <option value="false">Disabled</option>
                    </select>
                  </div>
                  <div style={{gridColumn:'1/-1'}}>
                    <label style={css.label}>Reset Password (leave blank to keep current)</label>
                    <input style={css.input} type="password" placeholder="Enter new password to reset" value={editUser.new_password||''}
                      onChange={e=>setEditUser(u=>({...u,new_password:e.target.value}))}/>
                  </div>
                </>
              )}
            </div>
            <div style={{display:'flex',gap:10,marginTop:20}}>
              <button style={css.btn()} onClick={editUser.id===currentUser.id?handleUpdateSelf:handleUpdate} disabled={saving}>
                {saving?'Saving…':'Save Changes'}
              </button>
              <button style={css.btn('ghost')} onClick={()=>setEditUser(null)}>Cancel</button>
            </div>
          </div>
        </div>
      )}

      {/* ── Add user form (admin only) ── */}
      {showForm && isAdmin && (
        <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>
      )}

      {/* ── Users table (admin sees all, others see only self) ── */}
      {isAdmin && (
        <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}
                    {u.id===currentUser.id && <span style={{...css.badge(THEME.accent),fontSize:10,marginLeft:6}}>You</span>}
                  </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('ghost'),padding:'4px 10px',fontSize:12}} onClick={()=>setEditUser({...u,new_password:''})}>Edit</button>
                      {u.id!==currentUser.id && <>
                        <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>
  );
}


// ── VOLUNTEER MATCHER ─────────────────────────────────────
function VolunteerMatcher() {
  const [projects,setProjects]=React.useState([]);
  const [mySkills,setMySkills]=React.useState(null);
  const [loading,setLoading]=React.useState(true);
  const [tab,setTab]=React.useState('projects');
  const [scanning,setScanning]=React.useState(false);
  const [skillForm,setSkillForm]=React.useState({skills:'',bio:'',availability:'part-time'});
  const [newProject,setNewProject]=React.useState({title:'',description:'',skills_needed:'',commitment:'5-10 hrs/week',duration:'3 months'});
  const [showForm,setShowForm]=React.useState(false);
  const STATUS_COLORS={open:THEME.success,closed:THEME.textMuted,filled:THEME.accent};

  const load=async()=>{
    setLoading(true);
    try{
      const [proj,skills]=await Promise.all([
        authFetch('/api/volunteers/projects').then(r=>r.json()),
        authFetch('/api/volunteers/my-skills').then(r=>r.json()),
      ]);
      setProjects(Array.isArray(proj)?proj:[]);
      if(skills){setMySkills(skills);setSkillForm({skills:(skills.skills||[]).join(', '),bio:skills.bio||'',availability:skills.availability||'part-time'});}
    }catch(e){}
    setLoading(false);
  };
  React.useEffect(()=>{load();},[]);

  const saveSkills=async()=>{
    try{
      await authFetch('/api/volunteers/my-skills',{method:'POST',body:JSON.stringify({
        skills:skillForm.skills.split(',').map(s=>s.trim()).filter(Boolean),
        bio:skillForm.bio,availability:skillForm.availability
      })});
      await load(); alert('✓ Skills saved!');
    }catch(e){alert('Failed: '+e.message);}
  };

  const applyToProject=async(projectId)=>{
    try{
      await authFetch('/api/volunteers/apply',{method:'POST',body:JSON.stringify({project_id:projectId})});
      alert('✓ Application submitted!');
    }catch(e){alert('Failed: '+e.message);}
  };

  const createProject=async()=>{
    try{
      await authFetch('/api/volunteers/projects',{method:'POST',body:JSON.stringify({
        ...newProject,
        skills_needed:newProject.skills_needed.split(',').map(s=>s.trim()).filter(Boolean)
      })});
      setShowForm(false); await load();
    }catch(e){alert('Failed: '+e.message);}
  };

  const runScan=async()=>{
    setScanning(true);
    try{
      await authFetch('/api/volunteers/scan',{method:'POST'});
      alert('✓ Matching scan started — notifications will be sent to matched members');
    }catch(e){alert('Failed: '+e.message);}
    setScanning(false);
  };

  return(
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:24,flexWrap:'wrap',gap:12}}>
        <div>
          <h1 style={css.h1}>Volunteer Matcher</h1>
          <p style={{color:THEME.textMuted,fontSize:14,margin:'4px 0 0'}}>Skills-based matching · MiniLM semantic search · automated notifications</p>
        </div>
        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          {currentUser.role==='admin'&&<>
            <button style={{...css.btn(),fontSize:12,padding:'8px 14px'}} onClick={()=>setShowForm(!showForm)}>+ New Project</button>
            <button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={runScan} disabled={scanning}>{scanning?'⏳ Scanning...':'🔍 Run Match Scan'}</button>
          </>}
          <button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={load}>↻ Refresh</button>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(150px,1fr))',gap:10,marginBottom:24}}>
        {[
          {label:'Open projects',value:projects.filter(p=>p.status==='open').length,color:THEME.success},
          {label:'Total projects',value:projects.length,color:THEME.accent},
          {label:'Skills saved',value:mySkills?'✓':'✗',color:mySkills?THEME.success:THEME.gold},
        ].map(s=>(
          <div key={s.label} style={{...css.card({}),padding:14}}>
            <div style={{fontSize:11,color:THEME.textMuted,marginBottom:4,textTransform:'uppercase',letterSpacing:'.06em'}}>{s.label}</div>
            <div style={{fontSize:26,fontWeight:800,color:s.color}}>{s.value}</div>
          </div>
        ))}
      </div>

      {showForm&&currentUser.role==='admin'&&(
        <div style={{...css.card({}),marginBottom:20,padding:20}}>
          <h3 style={{...css.h2,marginBottom:16}}>New Volunteer Project</h3>
          <div style={{display:'grid',gap:10}}>
            <input style={css.input} placeholder="Project title *" value={newProject.title} onChange={e=>setNewProject(f=>({...f,title:e.target.value}))}/>
            <textarea style={{...css.input,height:80,resize:'vertical'}} placeholder="Description" value={newProject.description} onChange={e=>setNewProject(f=>({...f,description:e.target.value}))}/>
            <input style={css.input} placeholder="Skills needed (comma-separated)" value={newProject.skills_needed} onChange={e=>setNewProject(f=>({...f,skills_needed:e.target.value}))}/>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
              <input style={css.input} placeholder="Commitment e.g. 5-10 hrs/week" value={newProject.commitment} onChange={e=>setNewProject(f=>({...f,commitment:e.target.value}))}/>
              <input style={css.input} placeholder="Duration e.g. 3 months" value={newProject.duration} onChange={e=>setNewProject(f=>({...f,duration:e.target.value}))}/>
            </div>
            <div style={{display:'flex',gap:8}}>
              <button style={css.btn()} onClick={createProject}>Create Project</button>
              <button style={css.btn('ghost')} onClick={()=>setShowForm(false)}>Cancel</button>
            </div>
          </div>
        </div>
      )}

      <div style={{display:'flex',gap:4,marginBottom:20,background:THEME.surfaceAlt,borderRadius:8,padding:4,width:'fit-content',border:`1px solid ${THEME.border}`}}>
        {[['projects','🤝 Projects'],['skills','⚡ My Skills']].map(([t,l])=>(
          <button key={t} onClick={()=>setTab(t)} style={{...css.btn(tab===t?'ghost':''),padding:'6px 16px',fontSize:13,background:tab===t?THEME.surface:'transparent'}}>{l}</button>
        ))}
      </div>

      {tab==='projects'&&(loading?<Spinner/>:(
        projects.length===0
          ?<div style={{textAlign:'center',padding:48,color:THEME.textMuted}}><div style={{fontSize:36,marginBottom:12}}>🤝</div><div style={{fontSize:15,fontWeight:600,color:THEME.text}}>No projects yet</div></div>
          :<div style={{display:'flex',flexDirection:'column',gap:12}}>
            {projects.map(p=>(
              <div key={p.id} style={{...css.card({}),padding:16}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',flexWrap:'wrap',gap:8,marginBottom:10}}>
                  <div style={{flex:1}}>
                    <div style={{fontSize:14,fontWeight:600}}>{p.title}</div>
                    <div style={{fontSize:12,color:THEME.textMuted,marginTop:2}}>{p.commitment} · {p.duration}</div>
                  </div>
                  <span style={{...css.badge(STATUS_COLORS[p.status]||THEME.textMuted),fontSize:10}}>{p.status}</span>
                </div>
                {p.description&&<div style={{fontSize:13,color:THEME.textMuted,marginBottom:10,lineHeight:1.5}}>{p.description}</div>}
                {(p.skills_needed||[]).length>0&&(
                  <div style={{display:'flex',gap:6,flexWrap:'wrap',marginBottom:10}}>
                    {p.skills_needed.map(s=><span key={s} style={{...css.badge(THEME.purple),fontSize:10}}>{s}</span>)}
                  </div>
                )}
                <div style={{display:'flex',gap:8,alignItems:'center'}}>
                  {p.status==='open'&&<button style={{...css.btn(),fontSize:11,padding:'5px 12px'}} onClick={()=>applyToProject(p.id)}>Apply to Volunteer</button>}
                  <span style={{fontSize:11,color:THEME.textMuted}}>{p.application_count||0} applied · {p.match_count||0} suggested</span>
                </div>
              </div>
            ))}
          </div>
      ))}

      {tab==='skills'&&(
        <div style={{...css.card({}),padding:20}}>
          <h3 style={{...css.h2,marginBottom:4}}>My Skills Profile</h3>
          <p style={{fontSize:13,color:THEME.textMuted,marginBottom:16}}>Your skills are used to automatically match you to volunteer opportunities.</p>
          <div style={{display:'grid',gap:12}}>
            <div>
              <label style={{fontSize:12,color:THEME.textMuted,display:'block',marginBottom:4}}>Skills (comma-separated)</label>
              <input style={css.input} placeholder="e.g. Python, Machine Learning, Project Management" value={skillForm.skills} onChange={e=>setSkillForm(f=>({...f,skills:e.target.value}))}/>
            </div>
            <div>
              <label style={{fontSize:12,color:THEME.textMuted,display:'block',marginBottom:4}}>Bio / background</label>
              <textarea style={{...css.input,height:80,resize:'vertical'}} placeholder="Brief description of your experience..." value={skillForm.bio} onChange={e=>setSkillForm(f=>({...f,bio:e.target.value}))}/>
            </div>
            <div>
              <label style={{fontSize:12,color:THEME.textMuted,display:'block',marginBottom:4}}>Availability</label>
              <select style={css.input} value={skillForm.availability} onChange={e=>setSkillForm(f=>({...f,availability:e.target.value}))}>
                {['part-time','full-time','weekends-only','flexible'].map(a=><option key={a} value={a}>{a}</option>)}
              </select>
            </div>
            <button style={{...css.btn(),alignSelf:'flex-start'}} onClick={saveSkills}>💾 Save Skills Profile</button>
          </div>
        </div>
      )}
    </div>
  );
}

// ── PARTNERSHIP & GRANT AGENT ──────────────────────────────
function PartnershipAgent() {
  const [opportunities,setOpportunities]=React.useState([]);
  const [proposals,setProposals]=React.useState([]);
  const [partnerships,setPartnerships]=React.useState([]);
  const [loading,setLoading]=React.useState(true);
  const [tab,setTab]=React.useState('grants');
  const [scanning,setScanning]=React.useState(false);
  const [drafting,setDrafting]=React.useState(null);
  const [editProposal,setEditProposal]=React.useState(null);
  const [newPartner,setNewPartner]=React.useState({org_name:'',org_type:'',contact_name:'',contact_email:'',notes:''});
  const [showPartnerForm,setShowPartnerForm]=React.useState(false);
  const REL_COLORS={high:THEME.danger,medium:THEME.gold,low:THEME.success};
  const STATUS_COLORS={new:THEME.accent,reviewing:THEME.gold,applied:THEME.purple,won:THEME.success,passed:THEME.textMuted};

  const load=async()=>{
    setLoading(true);
    try{
      const [opps,props,parts]=await Promise.all([
        authFetch('/api/grants/opportunities').then(r=>r.json()),
        authFetch('/api/grants/proposals').then(r=>r.json()),
        authFetch('/api/partnerships').then(r=>r.json()),
      ]);
      setOpportunities(Array.isArray(opps)?opps:[]);
      setProposals(Array.isArray(props)?props:[]);
      setPartnerships(Array.isArray(parts)?parts:[]);
    }catch(e){}
    setLoading(false);
  };
  React.useEffect(()=>{load();},[]);

  const runScan=async()=>{
    setScanning(true);
    try{await authFetch('/api/grants/scan',{method:'POST'});alert('✓ Grant scan started — check back in 2 minutes');setTimeout(load,120000);}
    catch(e){alert('Failed: '+e.message);}
    setScanning(false);
  };

  const draftProposal=async(oppId)=>{
    setDrafting(oppId);
    try{await authFetch(`/api/grants/draft/${oppId}`,{method:'POST'});alert('✓ Drafting — refresh in 30 seconds');setTimeout(load,35000);}
    catch(e){alert('Failed: '+e.message);}
    setDrafting(null);
  };

  const updateProposal=async(id,updates)=>{
    await authFetch(`/api/grants/proposals/${id}`,{method:'PATCH',body:JSON.stringify(updates)});
    await load(); setEditProposal(null);
  };

  const addPartner=async()=>{
    try{await authFetch('/api/partnerships',{method:'POST',body:JSON.stringify(newPartner)});
    setShowPartnerForm(false);setNewPartner({org_name:'',org_type:'',contact_name:'',contact_email:'',notes:''});await load();}
    catch(e){alert('Failed: '+e.message);}
  };

  return(
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:24,flexWrap:'wrap',gap:12}}>
        <div>
          <h1 style={css.h1}>Partnership & Grant Agent</h1>
          <p style={{color:THEME.textMuted,fontSize:14,margin:'4px 0 0'}}>AI grant discovery · proposal drafting · partnership tracking</p>
        </div>
        {currentUser.role==='admin'&&(
          <div style={{display:'flex',gap:8}}>
            <button style={{...css.btn(),fontSize:12,padding:'8px 14px'}} onClick={runScan} disabled={scanning}>{scanning?'⏳ Scanning...':'🔍 Scan for Grants'}</button>
            <button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={load}>↻</button>
          </div>
        )}
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(150px,1fr))',gap:10,marginBottom:24}}>
        {[
          {label:'Opportunities',value:opportunities.length,color:THEME.accent},
          {label:'Proposals',value:proposals.length,color:THEME.purple},
          {label:'Partners',value:partnerships.length,color:THEME.success},
          {label:'High relevance',value:opportunities.filter(o=>o.relevance==='high').length,color:THEME.danger},
        ].map(s=>(
          <div key={s.label} style={{...css.card({}),padding:14}}>
            <div style={{fontSize:11,color:THEME.textMuted,marginBottom:4,textTransform:'uppercase',letterSpacing:'.06em'}}>{s.label}</div>
            <div style={{fontSize:26,fontWeight:800,color:s.color}}>{s.value}</div>
          </div>
        ))}
      </div>

      <div style={{display:'flex',gap:4,marginBottom:20,background:THEME.surfaceAlt,borderRadius:8,padding:4,width:'fit-content',border:`1px solid ${THEME.border}`}}>
        {[['grants','💰 Grants'],['proposals','📝 Proposals'],['partnerships','🤝 Partners']].map(([t,l])=>(
          <button key={t} onClick={()=>setTab(t)} style={{...css.btn(tab===t?'ghost':''),padding:'6px 14px',fontSize:12,background:tab===t?THEME.surface:'transparent'}}>{l}</button>
        ))}
      </div>

      {loading?<Spinner/>:<>
        {tab==='grants'&&(
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            {opportunities.length===0
              ?<div style={{textAlign:'center',padding:48,color:THEME.textMuted}}><div style={{fontSize:36,marginBottom:12}}>💰</div><div style={{fontSize:15,fontWeight:600,color:THEME.text}}>No grants found yet</div>{currentUser.role==='admin'&&<button style={{...css.btn(),marginTop:12}} onClick={runScan}>🔍 Scan for Grants</button>}</div>
              :opportunities.map(o=>(
                <div key={o.id} style={{...css.card({}),borderLeft:`3px solid ${REL_COLORS[o.relevance]||THEME.border}`,padding:16}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',flexWrap:'wrap',gap:8,marginBottom:8}}>
                    <div style={{flex:1}}>
                      <div style={{fontSize:14,fontWeight:600}}>{o.title}</div>
                      <div style={{fontSize:12,color:THEME.textMuted,marginTop:2}}>{o.funder}{o.amount?` · ${o.amount}`:''}{o.deadline?` · Deadline: ${new Date(o.deadline).toLocaleDateString('en-SG')}`:''}</div>
                    </div>
                    <span style={{...css.badge(REL_COLORS[o.relevance]),fontSize:10}}>{o.relevance?.toUpperCase()}</span>
                  </div>
                  {o.description&&<div style={{fontSize:13,color:THEME.textMuted,marginBottom:10,lineHeight:1.5}}>{o.description}</div>}
                  <div style={{display:'flex',gap:8}}>
                    {currentUser.role==='admin'&&<button style={{...css.btn(),fontSize:11,padding:'5px 12px'}} onClick={()=>draftProposal(o.id)} disabled={drafting===o.id}>{drafting===o.id?'⏳ Drafting...':'📝 Draft Proposal'}</button>}
                    {o.url&&<a href={o.url} target="_blank" style={{fontSize:11,color:THEME.accent,lineHeight:'28px'}}>View grant →</a>}
                  </div>
                </div>
              ))
            }
          </div>
        )}
        {tab==='proposals'&&(
          <div style={{display:'flex',flexDirection:'column',gap:12}}>
            {proposals.length===0
              ?<div style={{textAlign:'center',padding:48,color:THEME.textMuted}}><div style={{fontSize:36,marginBottom:12}}>📝</div><div style={{fontSize:15,fontWeight:600,color:THEME.text}}>No proposals yet</div><div style={{fontSize:13,marginTop:8}}>Draft proposals from the Grants tab</div></div>
              :proposals.map(p=>(
                <div key={p.id} style={{...css.card({}),padding:16}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',flexWrap:'wrap',gap:8,marginBottom:12}}>
                    <div>
                      <div style={{fontSize:14,fontWeight:600}}>{p.opp_title}</div>
                      <div style={{fontSize:12,color:THEME.textMuted,marginTop:2}}>{p.funder}{p.amount?` · ${p.amount}`:''}</div>
                    </div>
                    <span style={{...css.badge(STATUS_COLORS[p.status]||THEME.textMuted),fontSize:10}}>{p.status}</span>
                  </div>
                  {editProposal===p.id?(
                    <div>
                      <textarea style={{...css.input,width:'100%',height:300,fontFamily:'monospace',fontSize:12,resize:'vertical'}}
                        defaultValue={p.content} id={`prop-${p.id}`}/>
                      <div style={{display:'flex',gap:8,marginTop:8,flexWrap:'wrap'}}>
                        <button style={css.btn()} onClick={()=>updateProposal(p.id,{content:document.getElementById(`prop-${p.id}`).value})}>💾 Save</button>
                        {['reviewing','applied','won','passed'].map(s=>(
                          <button key={s} style={{...css.btn('ghost'),fontSize:11}} onClick={()=>updateProposal(p.id,{status:s})}>→ {s}</button>
                        ))}
                        <button style={css.btn('ghost')} onClick={()=>setEditProposal(null)}>Cancel</button>
                      </div>
                    </div>
                  ):(
                    <>
                      <div style={{fontSize:13,color:THEME.textMuted,lineHeight:1.7,maxHeight:150,overflow:'hidden',marginBottom:10}}>{p.content?.slice(0,400)}...</div>
                      {currentUser.role==='admin'&&<button style={{...css.btn('ghost'),fontSize:11,padding:'4px 12px'}} onClick={()=>setEditProposal(p.id)}>✏️ Edit</button>}
                    </>
                  )}
                </div>
              ))
            }
          </div>
        )}
        {tab==='partnerships'&&(
          <div>
            {currentUser.role==='admin'&&<button style={{...css.btn(),marginBottom:16,fontSize:12}} onClick={()=>setShowPartnerForm(!showPartnerForm)}>+ Add Partner</button>}
            {showPartnerForm&&(
              <div style={{...css.card({}),marginBottom:16,padding:16}}>
                <div style={{display:'grid',gap:10}}>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
                    <input style={css.input} placeholder="Organisation name *" value={newPartner.org_name} onChange={e=>setNewPartner(f=>({...f,org_name:e.target.value}))}/>
                    <input style={css.input} placeholder="Type (e.g. Technology)" value={newPartner.org_type} onChange={e=>setNewPartner(f=>({...f,org_type:e.target.value}))}/>
                    <input style={css.input} placeholder="Contact name" value={newPartner.contact_name} onChange={e=>setNewPartner(f=>({...f,contact_name:e.target.value}))}/>
                    <input style={css.input} placeholder="Contact email" value={newPartner.contact_email} onChange={e=>setNewPartner(f=>({...f,contact_email:e.target.value}))}/>
                  </div>
                  <textarea style={{...css.input,height:60,resize:'vertical'}} placeholder="Notes" value={newPartner.notes} onChange={e=>setNewPartner(f=>({...f,notes:e.target.value}))}/>
                  <div style={{display:'flex',gap:8}}>
                    <button style={css.btn()} onClick={addPartner}>Add Partner</button>
                    <button style={css.btn('ghost')} onClick={()=>setShowPartnerForm(false)}>Cancel</button>
                  </div>
                </div>
              </div>
            )}
            {partnerships.length===0
              ?<div style={{textAlign:'center',padding:48,color:THEME.textMuted}}><div style={{fontSize:36,marginBottom:12}}>🤝</div><div style={{fontSize:15,fontWeight:600,color:THEME.text}}>No partners tracked yet</div></div>
              :<div style={{display:'flex',flexDirection:'column',gap:8}}>
                {partnerships.map(p=>(
                  <div key={p.id} style={{...css.card({}),padding:14,display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:8}}>
                    <div>
                      <div style={{fontSize:14,fontWeight:600}}>{p.org_name}</div>
                      <div style={{fontSize:12,color:THEME.textMuted}}>{p.org_type}{p.contact_name?` · ${p.contact_name}`:''}{p.contact_email?` · ${p.contact_email}`:''}</div>
                      {p.notes&&<div style={{fontSize:11,color:THEME.textMuted,marginTop:2}}>{p.notes}</div>}
                    </div>
                    <span style={{...css.badge(THEME.textMuted),fontSize:10,background:THEME.surfaceAlt}}>{p.status}</span>
                  </div>
                ))}
              </div>
            }
          </div>
        )}
      </>}
    </div>
  );
}

// ── AI SKILLS COACH ───────────────────────────────────────
function SkillsCoach() {
  const [data,setData]         = React.useState(null);
  const [loading,setLoading]   = React.useState(true);
  const [quiz,setQuiz]         = React.useState([]);
  const [tab,setTab]           = React.useState('pathway');
  const [answers,setAnswers]   = React.useState({});
  const [quizStep,setQuizStep] = React.useState(0);
  const [submitting,setSubmitting] = React.useState(false);
  const [nudging,setNudging]   = React.useState(false);

  const LEVELS = {
    beginner:     {label:'Beginner',     color:'#60A5FA', pct:10, desc:'Just starting your AI journey'},
    explorer:     {label:'Explorer',     color:THEME.gold, pct:35, desc:'Building foundational knowledge'},
    practitioner: {label:'Practitioner', color:THEME.success, pct:60, desc:'Applying AI in practice'},
    advanced:     {label:'Advanced',     color:THEME.purple, pct:82, desc:'Leading AI initiatives'},
    expert:       {label:'Expert',       color:THEME.danger, pct:95, desc:'Shaping AI strategy and research'},
  };
  const STATUS_COLORS = {not_started:THEME.textMuted, in_progress:THEME.gold, completed:THEME.success};
  const STATUS_LABELS = {not_started:'Not started', in_progress:'In progress', completed:'Completed'};

  const load = async () => {
    setLoading(true);
    try {
      const [d,q] = await Promise.all([
        authFetch('/api/skills/my-pathway').then(r=>r.json()),
        authFetch('/api/skills/quiz').then(r=>r.json()),
      ]);
      setData(d); setQuiz(Array.isArray(q)?q:[]);
      if(!d?.assessment) setTab('quiz');
    } catch(e){}
    setLoading(false);
  };
  React.useEffect(()=>{load();},[]);

  const submitQuiz = async () => {
    if(Object.keys(answers).length < quiz.length)
      return alert('Please answer all '+quiz.length+' questions');
    setSubmitting(true);
    try {
      const ansArr = quiz.map(q=>({question_id:q.id, answer:answers[q.id]||0}));
      const r = await authFetch('/api/skills/assess',{method:'POST',body:JSON.stringify({answers:ansArr})});
      const d = await r.json();
      alert('✓ Assessment complete! Level: '+d.assessment?.level+'. Your pathway is being generated — refresh in 30 seconds.');
      setTab('pathway'); setAnswers({}); setQuizStep(0);
      setTimeout(load, 30000);
    } catch(e){alert('Failed: '+e.message);}
    setSubmitting(false);
  };

  const updateProgress = async (courseId, status) => {
    try {
      await authFetch(`/api/skills/progress/${courseId}`,{method:'PATCH',body:JSON.stringify({status})});
      await load();
    } catch(e){alert('Failed: '+e.message);}
  };

  const sendNudge = async () => {
    setNudging(true);
    try{await authFetch('/api/skills/nudge',{method:'POST'});alert('✓ Weekly nudges sent to all members with active pathways!');}
    catch(e){alert('Failed: '+e.message);}
    setNudging(false);
  };

  const level     = LEVELS[data?.assessment?.level] || LEVELS.beginner;
  const pathway   = data?.pathway?.pathway ? (typeof data.pathway.pathway==='string'?JSON.parse(data.pathway.pathway):data.pathway.pathway) : null;
  const progress  = data?.progress || [];
  const nudges    = data?.nudges   || [];
  const completed = progress.filter(p=>p.status==='completed').length;
  const inProgress= progress.filter(p=>p.status==='in_progress').length;

  const tabs = [
    ['pathway','🗺️ My Pathway'],
    ['courses','📚 My Courses'],
    ['quiz','📝 Take Assessment'],
    ['nudges','📧 Nudge History'],
  ];

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:24,flexWrap:'wrap',gap:12}}>
        <div>
          <h1 style={css.h1}>AI Skills Coach</h1>
          <p style={{color:THEME.textMuted,fontSize:14,margin:'4px 0 0'}}>Personalised AI learning pathways · weekly nudges · course progress tracking</p>
        </div>
        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          {currentUser.role==='admin'&&<button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={sendNudge} disabled={nudging}>{nudging?'⏳ Sending...':'📧 Send Nudges'}</button>}
          <button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={load}>↻ Refresh</button>
        </div>
      </div>

      {/* Level card */}
      {data?.assessment&&(
        <div style={{...css.card({}),marginBottom:24,padding:20,background:`linear-gradient(135deg,${level.color}18,${level.color}08)`,border:`1px solid ${level.color}44`}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',flexWrap:'wrap',gap:12}}>
            <div>
              <div style={{fontSize:12,color:THEME.textMuted,textTransform:'uppercase',letterSpacing:'.08em',marginBottom:4}}>Your AI Level</div>
              <div style={{fontSize:28,fontWeight:800,color:level.color}}>{level.label}</div>
              <div style={{fontSize:13,color:THEME.textMuted,marginTop:2}}>{level.desc}</div>
            </div>
            <div style={{textAlign:'right'}}>
              <div style={{fontSize:36,fontWeight:800,color:level.color}}>{data.assessment.score}<span style={{fontSize:16,fontWeight:400}}>/100</span></div>
              <div style={{fontSize:11,color:THEME.textMuted}}>Assessment score</div>
            </div>
          </div>
          <div style={{marginTop:16}}>
            <div style={{height:8,background:THEME.surfaceAlt,borderRadius:4,overflow:'hidden'}}>
              <div style={{height:'100%',width:level.pct+'%',background:level.color,borderRadius:4,transition:'width .6s'}}/>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:10,color:THEME.textMuted,marginTop:4}}>
              {Object.values(LEVELS).map(l=><span key={l.label}>{l.label}</span>)}
            </div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,marginTop:16}}>
            {[
              {label:'Courses in progress',value:inProgress,color:THEME.gold},
              {label:'Courses completed',value:completed,color:THEME.success},
              {label:'Nudges received',value:nudges.length,color:THEME.purple},
            ].map(s=>(
              <div key={s.label} style={{background:THEME.surfaceAlt,borderRadius:8,padding:'10px 12px',textAlign:'center'}}>
                <div style={{fontSize:20,fontWeight:700,color:s.color}}>{s.value}</div>
                <div style={{fontSize:10,color:THEME.textMuted,marginTop:2}}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      <div style={{display:'flex',gap:4,marginBottom:20,background:THEME.surfaceAlt,borderRadius:8,padding:4,width:'fit-content',border:`1px solid ${THEME.border}`,flexWrap:'wrap'}}>
        {tabs.map(([t,l])=>(
          <button key={t} onClick={()=>setTab(t)} style={{...css.btn(tab===t?'ghost':''),padding:'6px 14px',fontSize:12,background:tab===t?THEME.surface:'transparent'}}>{l}</button>
        ))}
      </div>

      {loading?<Spinner/>:<>

        {/* PATHWAY TAB */}
        {tab==='pathway'&&(
          !data?.assessment
            ?<div style={{textAlign:'center',padding:48,color:THEME.textMuted}}>
                <div style={{fontSize:48,marginBottom:16}}>🎯</div>
                <div style={{fontSize:16,fontWeight:600,color:THEME.text,marginBottom:8}}>Discover your AI level</div>
                <div style={{fontSize:13,marginBottom:20}}>Take a 10-question assessment to get your personalised learning pathway</div>
                <button style={{...css.btn(),padding:'12px 28px',fontSize:14}} onClick={()=>setTab('quiz')}>Start Assessment →</button>
              </div>
            : !pathway
              ?<div style={{textAlign:'center',padding:48,color:THEME.textMuted}}>
                  <div style={{fontSize:36,marginBottom:12}}>⏳</div>
                  <div style={{fontSize:15,fontWeight:600,color:THEME.text}}>Generating your pathway...</div>
                  <div style={{fontSize:13,marginTop:8}}>Refresh in 30 seconds</div>
                  <button style={{...css.btn('ghost'),marginTop:16}} onClick={load}>↻ Refresh</button>
                </div>
              :<div style={{display:'flex',flexDirection:'column',gap:16}}>
                  {/* Summary */}
                  <div style={{...css.card({}),padding:20}}>
                    <div style={{fontSize:13,fontWeight:600,color:THEME.text,marginBottom:8}}>Your Learning Journey</div>
                    <div style={{fontSize:13,color:THEME.textMuted,lineHeight:1.7,marginBottom:16}}>{pathway.summary}</div>
                    {(pathway.goals||[]).length>0&&(
                      <div>
                        <div style={{fontSize:11,fontWeight:600,color:THEME.textMuted,textTransform:'uppercase',letterSpacing:'.06em',marginBottom:8}}>Your Goals</div>
                        {pathway.goals.map((g,i)=>(
                          <div key={i} style={{display:'flex',gap:10,padding:'6px 0',fontSize:13}}>
                            <span style={{color:THEME.success,fontWeight:700}}>✓</span><span>{g}</span>
                          </div>
                        ))}
                      </div>
                    )}
                    {pathway.next_step&&(
                      <div style={{marginTop:16,padding:14,background:`${THEME.accent}15`,border:`1px solid ${THEME.accent}33`,borderRadius:8}}>
                        <div style={{fontSize:11,fontWeight:600,color:THEME.accent,textTransform:'uppercase',letterSpacing:'.06em',marginBottom:4}}>Next Step</div>
                        <div style={{fontSize:13,color:THEME.text}}>{pathway.next_step}</div>
                      </div>
                    )}
                  </div>

                  {/* Milestones */}
                  {(pathway.milestones||[]).length>0&&(
                    <div>
                      <div style={{fontSize:12,fontWeight:600,color:THEME.textMuted,textTransform:'uppercase',letterSpacing:'.08em',marginBottom:12}}>Learning Milestones</div>
                      <div style={{display:'flex',flexDirection:'column',gap:10}}>
                        {pathway.milestones.map((m,i)=>(
                          <div key={i} style={{...css.card({}),padding:16,display:'flex',gap:14,alignItems:'flex-start'}}>
                            <div style={{width:36,height:36,borderRadius:'50%',background:THEME.accent,display:'flex',alignItems:'center',justifyContent:'center',fontSize:13,fontWeight:700,color:'#fff',flexShrink:0}}>W{m.week}</div>
                            <div style={{flex:1}}>
                              <div style={{fontSize:13,fontWeight:600,marginBottom:4}}>{m.title}</div>
                              <div style={{fontSize:12,color:THEME.textMuted,lineHeight:1.5,marginBottom:m.resources?.length?8:0}}>{m.description}</div>
                              {(m.resources||[]).length>0&&(
                                <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
                                  {m.resources.map((r,j)=><span key={j} style={{...css.badge(THEME.purple),fontSize:10}}>{r}</span>)}
                                </div>
                              )}
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  <button style={{...css.btn('ghost'),alignSelf:'flex-start',fontSize:12}} onClick={()=>setTab('quiz')}>🔄 Retake Assessment</button>
                </div>
        )}

        {/* COURSES TAB */}
        {tab==='courses'&&(
          progress.length===0
            ?<div style={{textAlign:'center',padding:48,color:THEME.textMuted}}>
                <div style={{fontSize:36,marginBottom:12}}>📚</div>
                <div style={{fontSize:15,fontWeight:600,color:THEME.text,marginBottom:8}}>No courses added yet</div>
                <div style={{fontSize:13,marginBottom:16}}>Complete your assessment to get course recommendations</div>
                <button style={css.btn()} onClick={()=>setTab('quiz')}>Take Assessment</button>
              </div>
            :<div style={{display:'flex',flexDirection:'column',gap:10}}>
              {progress.map(p=>(
                <div key={p.course_id} style={{...css.card({}),padding:16,display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:12}}>
                  <div style={{flex:1}}>
                    <div style={{fontSize:14,fontWeight:600}}>{p.course_title}</div>
                    <div style={{fontSize:12,color:THEME.textMuted,marginTop:2}}>{p.category} · {p.duration} · S${p.fee}</div>
                    {p.completed_at&&<div style={{fontSize:11,color:THEME.success,marginTop:2}}>Completed {new Date(p.completed_at).toLocaleDateString('en-SG')}</div>}
                  </div>
                  <div style={{display:'flex',gap:6,alignItems:'center',flexWrap:'wrap'}}>
                    <span style={{...css.badge(STATUS_COLORS[p.status]),fontSize:10}}>{STATUS_LABELS[p.status]}</span>
                    {p.status==='not_started'&&<button style={{...css.btn(),fontSize:11,padding:'4px 10px'}} onClick={()=>updateProgress(p.course_id,'in_progress')}>▶ Start</button>}
                    {p.status==='in_progress'&&<button style={{...css.btn(),fontSize:11,padding:'4px 10px',background:THEME.success,border:'none'}} onClick={()=>updateProgress(p.course_id,'completed')}>✓ Mark Done</button>}
                  </div>
                </div>
              ))}
            </div>
        )}

        {/* QUIZ TAB */}
        {tab==='quiz'&&(
          <div style={{maxWidth:640}}>
            {quiz.length===0
              ?<Spinner/>
              :<>
                <div style={{marginBottom:20}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
                    <div style={{fontSize:13,color:THEME.textMuted}}>Question {quizStep+1} of {quiz.length}</div>
                    <div style={{fontSize:12,color:THEME.textMuted}}>{Object.keys(answers).length}/{quiz.length} answered</div>
                  </div>
                  <div style={{height:4,background:THEME.surfaceAlt,borderRadius:2}}>
                    <div style={{height:'100%',width:((quizStep+1)/quiz.length*100)+'%',background:THEME.accent,borderRadius:2,transition:'width .3s'}}/>
                  </div>
                </div>

                {quiz[quizStep]&&(
                  <div style={{...css.card({}),padding:24}}>
                    <div style={{fontSize:15,fontWeight:600,color:THEME.text,marginBottom:20,lineHeight:1.5}}>{quiz[quizStep].q}</div>
                    <div style={{display:'flex',flexDirection:'column',gap:8}}>
                      {quiz[quizStep].options.map((opt,i)=>(
                        <button key={i}
                          onClick={()=>{setAnswers(a=>({...a,[quiz[quizStep].id]:i}));if(quizStep<quiz.length-1)setQuizStep(s=>s+1);}}
                          style={{
                            padding:'12px 16px',borderRadius:8,border:`1.5px solid ${answers[quiz[quizStep].id]===i?THEME.accent:THEME.border}`,
                            background:answers[quiz[quizStep].id]===i?`${THEME.accent}15`:THEME.surface,
                            color:THEME.text,cursor:'pointer',fontSize:13,textAlign:'left',transition:'all .15s'
                          }}>{opt}</button>
                      ))}
                    </div>
                    <div style={{display:'flex',justifyContent:'space-between',marginTop:20}}>
                      <button style={{...css.btn('ghost'),fontSize:12}} onClick={()=>setQuizStep(s=>Math.max(0,s-1))} disabled={quizStep===0}>← Back</button>
                      {quizStep<quiz.length-1
                        ?<button style={{...css.btn(),fontSize:12}} onClick={()=>setQuizStep(s=>s+1)} disabled={answers[quiz[quizStep].id]===undefined}>Next →</button>
                        :<button style={{...css.btn(),fontSize:12,padding:'8px 24px'}} onClick={submitQuiz} disabled={submitting||Object.keys(answers).length<quiz.length}>
                            {submitting?'⏳ Analysing...':'Submit Assessment ✓'}
                          </button>
                      }
                    </div>
                  </div>
                )}
              </>
            }
          </div>
        )}

        {/* NUDGES TAB */}
        {tab==='nudges'&&(
          nudges.length===0
            ?<div style={{textAlign:'center',padding:48,color:THEME.textMuted}}>
                <div style={{fontSize:36,marginBottom:12}}>📧</div>
                <div style={{fontSize:15,fontWeight:600,color:THEME.text}}>No nudges yet</div>
                <div style={{fontSize:13,marginTop:8}}>Weekly learning nudges are sent every Friday 8am SGT</div>
              </div>
            :<div style={{display:'flex',flexDirection:'column',gap:10}}>
              {nudges.map(n=>(
                <div key={n.id} style={{...css.card({}),padding:16}}>
                  <div style={{fontSize:11,color:THEME.textMuted,marginBottom:8}}>{new Date(n.sent_at).toLocaleDateString('en-SG',{weekday:'short',day:'numeric',month:'short',year:'numeric'})}</div>
                  <div style={{fontSize:13,color:THEME.text,lineHeight:1.7,whiteSpace:'pre-wrap'}}>{n.body}</div>
                </div>
              ))}
            </div>
        )}
      </>}
    </div>
  );
}

// ── AI ETHICS AUDITOR ──────────────────────────────────────
function EthicsAuditor() {
  const [audits,setAudits]=React.useState([]);
  const [loading,setLoading]=React.useState(true);
  const [submitting,setSubmitting]=React.useState(false);
  const [tab,setTab]=React.useState('audits');
  const [selected,setSelected]=React.useState(null);
  const [form,setForm]=React.useState({use_case_title:'',use_case_desc:'',ai_system:'',data_used:'',decisions_made:''});
  const RISK_COLORS={low:THEME.success,medium:THEME.gold,high:THEME.danger,critical:'#DC2626',pending:THEME.textMuted,processing:THEME.accent};
  const RISK_EMOJI={low:'🟢',medium:'🟡',high:'🟠',critical:'🔴',pending:'⏳',processing:'⚙️'};

  const load=async()=>{
    setLoading(true);
    try{const r=await authFetch('/api/ethics/audits');const d=await r.json();setAudits(Array.isArray(d)?d:[]);}
    catch(e){}
    setLoading(false);
  };
  React.useEffect(()=>{load();},[]);

  const submitAudit=async()=>{
    if(!form.use_case_title) return alert('Please provide a title');
    setSubmitting(true);
    try{
      const r=await authFetch('/api/ethics/submit',{method:'POST',body:JSON.stringify(form)});
      const d=await r.json();
      alert(d.message||'✓ Audit submitted');
      setForm({use_case_title:'',use_case_desc:'',ai_system:'',data_used:'',decisions_made:''});
      setTab('audits'); setTimeout(load,35000);
    }catch(e){alert('Failed: '+e.message);}
    setSubmitting(false);
  };

  const avg=audits.filter(a=>a.fairness_score).length
    ?audits.filter(a=>a.fairness_score).reduce((s,a)=>s+parseFloat(a.fairness_score),0)/audits.filter(a=>a.fairness_score).length
    :0;

  return(
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:24,flexWrap:'wrap',gap:12}}>
        <div>
          <h1 style={css.h1}>AI Ethics Auditor</h1>
          <p style={{color:THEME.textMuted,fontSize:14,margin:'4px 0 0'}}>Bias detection · fairness analysis · Singapore PDPA · EU AI Act compliance</p>
        </div>
        <button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={load}>↻ Refresh</button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(150px,1fr))',gap:10,marginBottom:24}}>
        {[
          {label:'Total audits',value:audits.length,color:THEME.accent},
          {label:'Avg fairness',value:audits.filter(a=>a.fairness_score).length?avg.toFixed(1)+'/10':'—',color:avg>=7?THEME.success:avg>=5?THEME.gold:THEME.danger},
          {label:'High/critical',value:audits.filter(a=>['high','critical'].includes(a.risk_level)).length,color:THEME.danger},
          {label:'Complete',value:audits.filter(a=>a.status==='complete').length,color:THEME.success},
        ].map(s=>(
          <div key={s.label} style={{...css.card({}),padding:14}}>
            <div style={{fontSize:11,color:THEME.textMuted,marginBottom:4,textTransform:'uppercase',letterSpacing:'.06em'}}>{s.label}</div>
            <div style={{fontSize:26,fontWeight:800,color:s.color}}>{s.value}</div>
          </div>
        ))}
      </div>

      <div style={{display:'flex',gap:4,marginBottom:20,background:THEME.surfaceAlt,borderRadius:8,padding:4,width:'fit-content',border:`1px solid ${THEME.border}`}}>
        {[['audits','📋 My Audits'],['submit','➕ Submit Use Case']].map(([t,l])=>(
          <button key={t} onClick={()=>setTab(t)} style={{...css.btn(tab===t?'ghost':''),padding:'6px 16px',fontSize:13,background:tab===t?THEME.surface:'transparent'}}>{l}</button>
        ))}
      </div>

      {tab==='submit'&&(
        <div style={{...css.card({}),padding:24,maxWidth:640}}>
          <h3 style={{...css.h2,marginBottom:4}}>Submit AI Use Case for Audit</h3>
          <p style={{fontSize:13,color:THEME.textMuted,marginBottom:20,lineHeight:1.6}}>Our AI Ethics Auditor will analyse your use case for bias, fairness and transparency issues using Singapore Model AI Governance Framework and EU AI Act guidelines. Results in ~30 seconds.</p>
          <div style={{display:'grid',gap:12}}>
            <div><label style={{fontSize:12,color:THEME.textMuted,display:'block',marginBottom:4}}>Use case title *</label>
              <input style={css.input} placeholder="e.g. AI-powered recruitment screening" value={form.use_case_title} onChange={e=>setForm(f=>({...f,use_case_title:e.target.value}))}/></div>
            <div><label style={{fontSize:12,color:THEME.textMuted,display:'block',marginBottom:4}}>Description</label>
              <textarea style={{...css.input,height:80,resize:'vertical'}} placeholder="What does this AI system do?" value={form.use_case_desc} onChange={e=>setForm(f=>({...f,use_case_desc:e.target.value}))}/></div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
              <div><label style={{fontSize:12,color:THEME.textMuted,display:'block',marginBottom:4}}>AI system / model</label>
                <input style={css.input} placeholder="e.g. GPT-4, custom ML" value={form.ai_system} onChange={e=>setForm(f=>({...f,ai_system:e.target.value}))}/></div>
              <div><label style={{fontSize:12,color:THEME.textMuted,display:'block',marginBottom:4}}>Data used</label>
                <input style={css.input} placeholder="e.g. resumes, transactions" value={form.data_used} onChange={e=>setForm(f=>({...f,data_used:e.target.value}))}/></div>
            </div>
            <div><label style={{fontSize:12,color:THEME.textMuted,display:'block',marginBottom:4}}>Decisions made by AI</label>
              <textarea style={{...css.input,height:60,resize:'vertical'}} placeholder="e.g. Shortlists candidates, approves loans" value={form.decisions_made} onChange={e=>setForm(f=>({...f,decisions_made:e.target.value}))}/></div>
            <button style={{...css.btn(),alignSelf:'flex-start',padding:'10px 24px'}} onClick={submitAudit} disabled={submitting}>
              {submitting?'⏳ Submitting...':'🔍 Submit for Audit'}
            </button>
          </div>
        </div>
      )}

      {tab==='audits'&&(loading?<Spinner/>:(
        audits.length===0
          ?<div style={{textAlign:'center',padding:48,color:THEME.textMuted}}>
              <div style={{fontSize:36,marginBottom:12}}>🔍</div>
              <div style={{fontSize:15,fontWeight:600,color:THEME.text,marginBottom:8}}>No audits yet</div>
              <button style={css.btn()} onClick={()=>setTab('submit')}>Submit a Use Case</button>
            </div>
          :<div style={{display:'flex',flexDirection:'column',gap:12}}>
            {audits.map(a=>(
              <div key={a.id} style={{...css.card({}),borderLeft:`3px solid ${RISK_COLORS[a.risk_level||a.status]||THEME.border}`,padding:16}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',flexWrap:'wrap',gap:8,marginBottom:10}}>
                  <div style={{flex:1}}>
                    <div style={{fontSize:14,fontWeight:600}}>{RISK_EMOJI[a.risk_level||a.status]||'⚪'} {a.use_case_title}</div>
                    <div style={{fontSize:12,color:THEME.textMuted,marginTop:2}}>
                      {a.full_name&&`${a.full_name} · `}
                      {new Date(a.created_at).toLocaleDateString('en-SG',{day:'2-digit',month:'short',year:'numeric'})}
                    </div>
                  </div>
                  <div style={{display:'flex',gap:8,alignItems:'center'}}>
                    {a.fairness_score&&<span style={{fontSize:13,fontWeight:600,color:parseFloat(a.fairness_score)>=7?THEME.success:parseFloat(a.fairness_score)>=5?THEME.gold:THEME.danger}}>{parseFloat(a.fairness_score).toFixed(1)}/10</span>}
                    <span style={{...css.badge(RISK_COLORS[a.status]||THEME.textMuted),fontSize:10}}>{a.status}</span>
                  </div>
                </div>
                {a.status==='complete'&&<>
                  {(a.recommendations||[]).length>0&&(
                    <div style={{marginBottom:10}}>
                      {a.recommendations.slice(0,2).map((r,i)=>(
                        <div key={i} style={{fontSize:12,color:THEME.text,padding:'3px 0',display:'flex',gap:8}}>
                          <span style={{color:THEME.accent}}>→</span><span>{r}</span>
                        </div>
                      ))}
                    </div>
                  )}
                  <button style={{...css.btn('ghost'),fontSize:11,padding:'4px 12px'}} onClick={()=>setSelected(selected===a.id?null:a.id)}>
                    {selected===a.id?'Hide report':'📄 View full report'}
                  </button>
                  {selected===a.id&&(
                    <div style={{marginTop:12,padding:16,background:THEME.surfaceAlt,borderRadius:8,fontSize:12,color:THEME.text,lineHeight:1.8,whiteSpace:'pre-wrap'}}>
                      {a.full_report}
                    </div>
                  )}
                </>}
                {a.status==='processing'&&<div style={{fontSize:12,color:THEME.accent}}>⚙️ Audit in progress — refresh in 30 seconds</div>}
              </div>
            ))}
          </div>
      ))}
    </div>
  );
}

// ── COMMUNITY & EVENT AGENT ──────────────────────────────
function CommunityAgent() {
  const [events, setEvents]       = React.useState([]);
  const [emailLog, setEmailLog]   = React.useState([]);
  const [loading, setLoading]     = React.useState(true);
  const [agendas, setAgendas]     = React.useState({});
  const [genId, setGenId]         = React.useState(null);
  const [sending, setSending]     = React.useState(null);
  const [tab, setTab]             = React.useState('events');

  const TYPE_LABELS = {
    event_reminder_24h:  '24h Reminder',
    post_event_followup: 'Post-event',
    weekly_digest:       'Weekly Digest',
    rsvp_confirmation:   'RSVP Confirm',
  };
  const TYPE_COLORS = {
    event_reminder_24h:  THEME.accent,
    post_event_followup: THEME.success,
    weekly_digest:       THEME.purple,
    rsvp_confirmation:   THEME.gold,
  };

  const load = async () => {
    setLoading(true);
    try {
      const [ev, log] = await Promise.all([
        authFetch('/api/events?limit=20').then(r=>r.json()),
        authFetch('/api/community/email-log').then(r=>r.json()),
      ]);
      setEvents(Array.isArray(ev)?ev:[]);
      setEmailLog(Array.isArray(log)?log:[]);
    } catch(e) {}
    setLoading(false);
  };

  React.useEffect(()=>{ load(); },[]);

  const generateAgenda = async (id) => {
    setGenId(id);
    try {
      const r = await authFetch('/api/community/agenda/'+id);
      const d = await r.json();
      setAgendas(a=>({...a,[id]:d.agenda}));
    } catch(e) { alert('Failed: '+e.message); }
    setGenId(null);
  };

  const sendReminders = async (id) => {
    setSending('remind-'+id);
    try {
      await authFetch('/api/community/remind/'+id, { method:'POST' });
      alert('Reminders sending to all registrants!');
    } catch(e) { alert('Failed: '+e.message); }
    setSending(null);
  };

  const sendFollowup = async (id) => {
    setSending('followup-'+id);
    try {
      await authFetch('/api/community/followup/'+id, { method:'POST' });
      alert('Post-event follow-up sending!');
    } catch(e) { alert('Failed: '+e.message); }
    setSending(null);
  };

  const sendDigest = async () => {
    setSending('digest');
    try {
      await authFetch('/api/community/digest', { method:'POST' });
      alert('Weekly digest sending to all active members!');
      setTimeout(load, 5000);
    } catch(e) { alert('Failed: '+e.message); }
    setSending(null);
  };

  const upcoming = events.filter(e=>e.status==='upcoming');
  const past     = events.filter(e=>e.status==='past');

  const stats = {
    upcoming: upcoming.length,
    past:     past.length,
    emails:   emailLog.length,
    reminders: emailLog.filter(l=>l.type==='event_reminder_24h').length,
  };

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:24,flexWrap:'wrap',gap:12}}>
        <div>
          <h1 style={css.h1}>Community Agent</h1>
          <p style={{color:THEME.textMuted,fontSize:14,margin:'4px 0 0'}}>Automated event agendas · reminders · post-event newsletters · weekly digest</p>
        </div>
        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          <button style={{...css.btn(),fontSize:12,padding:'8px 14px'}}
            onClick={sendDigest} disabled={sending==='digest'}>
            {sending==='digest'?'⏳ Sending...':'📨 Send Weekly Digest'}
          </button>
          <button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={load}>↻ Refresh</button>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(150px,1fr))',gap:10,marginBottom:24}}>
        {[
          {label:'Upcoming events', value:stats.upcoming, color:THEME.accent},
          {label:'Past events',     value:stats.past,     color:THEME.textMuted},
          {label:'Emails logged',   value:stats.emails,   color:THEME.success},
          {label:'Reminders sent',  value:stats.reminders,color:THEME.gold},
        ].map(s=>(
          <div key={s.label} style={{...css.card({}),padding:14}}>
            <div style={{fontSize:11,color:THEME.textMuted,marginBottom:4,textTransform:'uppercase',letterSpacing:'.06em'}}>{s.label}</div>
            <div style={{fontSize:26,fontWeight:800,color:s.color}}>{s.value}</div>
          </div>
        ))}
      </div>

      <div style={{display:'flex',gap:4,marginBottom:20,background:THEME.surfaceAlt,borderRadius:8,padding:4,width:'fit-content',border:`1px solid ${THEME.border}`}}>
        {[['events','📅 Events'],['log','📧 Email Log']].map(([t,l])=>(
          <button key={t} onClick={()=>setTab(t)}
            style={{...css.btn(tab===t?'ghost':''),padding:'6px 16px',fontSize:13,background:tab===t?THEME.surface:'transparent'}}>
            {l}
          </button>
        ))}
      </div>

      {tab==='events'&&(
        <div>
          {loading?<Spinner/>:(
            <div>
              {upcoming.length>0&&(
                <div style={{marginBottom:24}}>
                  <div style={{fontSize:12,fontWeight:600,color:THEME.textMuted,textTransform:'uppercase',letterSpacing:'.08em',marginBottom:12}}>Upcoming Events</div>
                  <div style={{display:'flex',flexDirection:'column',gap:12}}>
                    {upcoming.map(e=>(
                      <div key={e.id} style={{...css.card({}),border:`1px solid ${THEME.accent}33`}}>
                        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',flexWrap:'wrap',gap:8,marginBottom:10}}>
                          <div>
                            <div style={{fontSize:14,fontWeight:600}}>{e.title}</div>
                            <div style={{fontSize:12,color:THEME.textMuted,marginTop:2}}>
                              {new Date(e.start_date).toLocaleDateString('en-SG',{weekday:'short',day:'numeric',month:'short',year:'numeric'})} · {e.location||'TBA'}
                            </div>
                          </div>
                          <span style={{...css.badge(THEME.accent),fontSize:10}}>Upcoming</span>
                        </div>
                        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
                          <button style={{...css.btn(),fontSize:11,padding:'5px 12px'}}
                            onClick={()=>generateAgenda(e.id)} disabled={genId===e.id}>
                            {genId===e.id?'⏳ Generating...':'📋 Generate Agenda'}
                          </button>
                          <button style={{...css.btn('ghost'),fontSize:11,padding:'5px 12px'}}
                            onClick={()=>sendReminders(e.id)} disabled={!!sending}>
                            {sending==='remind-'+e.id?'⏳ Sending...':'📨 Send Reminders'}
                          </button>
                        </div>
                        {agendas[e.id]&&(
                          <div style={{marginTop:12,padding:14,background:THEME.surfaceAlt,borderRadius:8,fontSize:12,color:THEME.text,lineHeight:1.8,whiteSpace:'pre-wrap'}}>
                            {agendas[e.id]}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {past.length>0&&(
                <div>
                  <div style={{fontSize:12,fontWeight:600,color:THEME.textMuted,textTransform:'uppercase',letterSpacing:'.08em',marginBottom:12}}>Past Events</div>
                  <div style={{display:'flex',flexDirection:'column',gap:12}}>
                    {past.map(e=>(
                      <div key={e.id} style={{...css.card({})}}>
                        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',flexWrap:'wrap',gap:8,marginBottom:10}}>
                          <div>
                            <div style={{fontSize:14,fontWeight:600}}>{e.title}</div>
                            <div style={{fontSize:12,color:THEME.textMuted,marginTop:2}}>
                              {new Date(e.start_date).toLocaleDateString('en-SG',{day:'numeric',month:'short',year:'numeric'})} · {e.location||'TBA'}
                            </div>
                          </div>
                          <span style={{...css.badge(THEME.textMuted),fontSize:10,background:THEME.surfaceAlt}}>Past</span>
                        </div>
                        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
                          <button style={{...css.btn('ghost'),fontSize:11,padding:'5px 12px'}}
                            onClick={()=>sendFollowup(e.id)} disabled={!!sending}>
                            {sending==='followup-'+e.id?'⏳ Sending...':'📧 Send Follow-up'}
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {events.length===0&&(
                <div style={{textAlign:'center',padding:48,color:THEME.textMuted}}>
                  <div style={{fontSize:36,marginBottom:12}}>📅</div>
                  <div style={{fontSize:15,fontWeight:600,color:THEME.text}}>No events yet</div>
                  <div style={{fontSize:13,marginTop:8}}>Create events in the Events portal to get started</div>
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {tab==='log'&&(
        <div>
          {loading?<Spinner/>:emailLog.length===0?(
            <div style={{textAlign:'center',padding:48,color:THEME.textMuted}}>
              <div style={{fontSize:36,marginBottom:12}}>📧</div>
              <div style={{fontSize:15,fontWeight:600,color:THEME.text}}>No emails sent yet</div>
              <div style={{fontSize:13,marginTop:8}}>Emails will appear here when reminders and digests are sent</div>
            </div>
          ):(
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              {emailLog.map(log=>(
                <div key={log.id} style={{...css.card({}),padding:12,display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:8}}>
                  <div style={{flex:1}}>
                    <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:4,flexWrap:'wrap'}}>
                      <span style={{...css.badge(TYPE_COLORS[log.type]||THEME.textMuted),fontSize:10}}>
                        {TYPE_LABELS[log.type]||log.type}
                      </span>
                      <span style={{fontSize:12,color:THEME.text}}>{log.subject?.slice(0,60)}</span>
                    </div>
                    <div style={{fontSize:11,color:THEME.textMuted}}>
                      To: {log.recipient} · {new Date(log.sent_at).toLocaleDateString('en-SG',{day:'2-digit',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'})}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ── RESEARCH SYNTHESIZER ─────────────────────────────────
function ResearchSynthesizer() {
  const [findings, setFindings] = React.useState([]);
  const [reports, setReports]   = React.useState([]);
  const [loading, setLoading]   = React.useState(true);
  const [scanning, setScanning] = React.useState(false);
  const [tab, setTab]           = React.useState('findings');
  const [filter, setFilter]     = React.useState('all');

  const CATS = {
    all:'All Topics', llm:'LLMs', agentic:'Agentic AI',
    asia:'AI in Asia', safety:'AI Safety', applied:'Applied AI', multimodal:'Multimodal'
  };
  const REL_COLORS = { high: THEME.danger, medium: THEME.gold, low: THEME.success };

  const load = async () => {
    setLoading(true);
    try {
      const [f, r] = await Promise.all([
        authFetch('/api/research/findings?limit=50').then(r=>r.json()),
        authFetch('/api/research/reports').then(r=>r.json()),
      ]);
      setFindings(Array.isArray(f)?f:[]);
      setReports(Array.isArray(r)?r:[]);
    } catch(e) {}
    setLoading(false);
  };

  React.useEffect(()=>{ load(); },[]);

  const runScan = async () => {
    setScanning(true);
    try {
      const r = await authFetch('/api/research/scan', { method:'POST' });
      const d = await r.json();
      alert(d.message || 'Scan started');
      setTimeout(load, 180000);
    } catch(e) { alert('Failed: '+e.message); }
    setScanning(false);
  };

  const genReport = async () => {
    try {
      await authFetch('/api/research/report', { method:'POST' });
      alert('Report generation started — refresh in 30 seconds');
      setTimeout(load, 35000);
    } catch(e) { alert('Failed: '+e.message); }
  };

  const filtered = findings.filter(f => filter==='all' || f.category===filter);

  const stats = {
    total: findings.length,
    high:  findings.filter(f=>f.relevance==='high').length,
    reports: reports.length,
    cats: [...new Set(findings.map(f=>f.category))].length
  };

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:24,flexWrap:'wrap',gap:12}}>
        <div>
          <h1 style={css.h1}>Research Synthesizer</h1>
          <p style={{color:THEME.textMuted,fontSize:14,margin:'4px 0 0'}}>Weekly AI research intelligence with Asia-focused insights · Claude web search</p>
        </div>
        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          <button style={{...css.btn(),fontSize:12,padding:'8px 14px'}} onClick={runScan} disabled={scanning}>
            {scanning?'⏳ Scanning (3 min)...':'🔍 Run Weekly Scan'}
          </button>
          <button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={genReport}>
            📋 Generate Report
          </button>
          <button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={load}>↻ Refresh</button>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(150px,1fr))',gap:10,marginBottom:24}}>
        {[
          {label:'Total findings', value:stats.total, color:THEME.accent},
          {label:'High relevance', value:stats.high, color:THEME.danger},
          {label:'Topics covered', value:stats.cats, color:THEME.purple},
          {label:'Monthly reports', value:stats.reports, color:THEME.success},
        ].map(s=>(
          <div key={s.label} style={{...css.card({}),padding:14}}>
            <div style={{fontSize:11,color:THEME.textMuted,marginBottom:4,textTransform:'uppercase',letterSpacing:'.06em'}}>{s.label}</div>
            <div style={{fontSize:26,fontWeight:800,color:s.color}}>{s.value}</div>
          </div>
        ))}
      </div>

      <div style={{display:'flex',gap:4,marginBottom:20,background:THEME.surfaceAlt,borderRadius:8,padding:4,width:'fit-content',border:`1px solid ${THEME.border}`}}>
        {[['findings','🔬 Findings'],['reports','📋 Reports']].map(([t,l])=>(
          <button key={t} onClick={()=>setTab(t)}
            style={{...css.btn(tab===t?'ghost':''),padding:'6px 16px',fontSize:13,background:tab===t?THEME.surface:'transparent'}}>
            {l}
          </button>
        ))}
      </div>

      {tab==='findings'&&(
        <div>
          <div style={{display:'flex',gap:6,marginBottom:16,flexWrap:'wrap'}}>
            {Object.entries(CATS).map(([k,v])=>(
              <button key={k} onClick={()=>setFilter(k)}
                style={{...css.btn(filter===k?'primary':'ghost'),padding:'4px 12px',fontSize:11}}>
                {v}
              </button>
            ))}
          </div>
          {loading?<Spinner/>:filtered.length===0?(
            <div style={{textAlign:'center',padding:48,color:THEME.textMuted}}>
              <div style={{fontSize:36,marginBottom:12}}>🔬</div>
              <div style={{fontSize:15,fontWeight:600,color:THEME.text,marginBottom:8}}>No findings yet</div>
              <div style={{fontSize:13,marginBottom:16}}>Run a scan to fetch the latest AI research from across the web</div>
              <button style={css.btn()} onClick={runScan} disabled={scanning}>
                {scanning?'⏳ Scanning...':'🔍 Run First Scan'}
              </button>
            </div>
          ):(
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              {filtered.map(f=>(
                <div key={f.id} style={{...css.card({}),borderLeft:`3px solid ${REL_COLORS[f.relevance]||THEME.border}`,padding:16}}>
                  <div style={{display:'flex',gap:8,marginBottom:8,flexWrap:'wrap',alignItems:'center'}}>
                    <span style={{...css.badge(THEME.accent),fontSize:10}}>{CATS[f.category]||f.category}</span>
                    <span style={{...css.badge(REL_COLORS[f.relevance]),fontSize:10}}>{f.relevance?.toUpperCase()}</span>
                    {(f.tags||[]).slice(0,2).map(t=>(
                      <span key={t} style={{...css.badge(THEME.textMuted),fontSize:10,background:THEME.surfaceAlt}}>{t}</span>
                    ))}
                    <span style={{fontSize:11,color:THEME.textMuted,marginLeft:'auto'}}>
                      {new Date(f.created_at).toLocaleDateString('en-SG',{day:'2-digit',month:'short',year:'numeric'})}
                    </span>
                  </div>
                  <div style={{fontSize:14,fontWeight:600,marginBottom:6,color:THEME.text}}>{f.title}</div>
                  <div style={{fontSize:13,color:THEME.textMuted,lineHeight:1.6,marginBottom:f.implications?8:0}}>{f.summary}</div>
                  {f.implications&&(
                    <div style={{fontSize:12,color:'#2DD4BF',padding:'8px 12px',background:'rgba(45,212,191,0.05)',borderRadius:6,lineHeight:1.5}}>
                      💡 Asia lens: {f.implications}
                    </div>
                  )}
                  {f.source_urls?.length>0&&f.source_urls[0]&&(
                    <a href={f.source_urls[0]} target="_blank" style={{fontSize:11,color:THEME.accent,marginTop:6,display:'block'}}>Source →</a>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {tab==='reports'&&(
        <div>
          {loading?<Spinner/>:reports.length===0?(
            <div style={{textAlign:'center',padding:48,color:THEME.textMuted}}>
              <div style={{fontSize:36,marginBottom:12}}>📋</div>
              <div style={{fontSize:15,fontWeight:600,color:THEME.text,marginBottom:8}}>No reports yet</div>
              <div style={{fontSize:13,marginBottom:16}}>Run a scan first, then generate a monthly report</div>
              <button style={css.btn()} onClick={genReport}>📋 Generate First Report</button>
            </div>
          ):(
            <div style={{display:'flex',flexDirection:'column',gap:16}}>
              {reports.map(r=>(
                <div key={r.id} style={{...css.card({}),border:`1px solid ${THEME.purple}44`}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:12,flexWrap:'wrap',gap:8}}>
                    <div>
                      <div style={{fontSize:15,fontWeight:700}}>{r.title}</div>
                      <div style={{fontSize:12,color:THEME.textMuted,marginTop:2}}>{r.period}</div>
                    </div>
                  </div>
                  {r.highlights?.length>0&&(
                    <div style={{display:'flex',gap:6,flexWrap:'wrap',marginBottom:12}}>
                      {r.highlights.map((h,i)=>(
                        <span key={i} style={{...css.badge(THEME.purple),fontSize:10,maxWidth:200,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{h}</span>
                      ))}
                    </div>
                  )}
                  <div style={{fontSize:13,color:THEME.textMuted,lineHeight:1.8,whiteSpace:'pre-wrap'}}>{r.content}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ── MARKETING AGENT ───────────────────────────────────────
function MarketingAgent() {
  const [content, setContent]   = React.useState([]);
  const [loading, setLoading]   = React.useState(true);
  const [generating, setGenerating] = React.useState(null);
  const [tab, setTab]           = React.useState('drafts');
  const [filter, setFilter]     = React.useState('all');
  const [editId, setEditId]     = React.useState(null);
  const [editText, setEditText] = React.useState('');
  const [events, setEvents]     = React.useState([]);
  const [courses, setCourses]   = React.useState([]);
  const [policies, setPolicies] = React.useState([]);
  const [copied, setCopied]     = React.useState(null);

  const TYPE_LABELS = {
    event_promo:'Event Promo', membership:'Membership', policy_announcement:'Policy Alert',
    course_promo:'Course Promo', newsletter:'Newsletter', weekly_plan:'Weekly Plan',
    content_plan:'Content Plan'
  };
  const TYPE_COLORS = {
    event_promo:THEME.accent, membership:THEME.success, policy_announcement:'#8B5CF6',
    course_promo:THEME.gold, newsletter:THEME.teal||'#2DD4BF', weekly_plan:THEME.textMuted,
    content_plan:THEME.textMuted
  };
  const STATUS_COLORS = { draft:THEME.gold, approved:THEME.success, archived:THEME.textMuted };

  const load = async () => {
    setLoading(true);
    try {
      const [c, ev, co, pol] = await Promise.all([
        authFetch('/api/marketing/content?limit=100').then(r=>r.json()),
        authFetch('/api/events?limit=10').then(r=>r.json()),
        authFetch('/api/courses').then(r=>r.json()),
        authFetch('/api/policy/reports?limit=10').then(r=>r.json()),
      ]);
      setContent(Array.isArray(c)?c:[]);
      setEvents(Array.isArray(ev)?ev:[]);
      setCourses(Array.isArray(co)?co:[]);
      setPolicies(Array.isArray(pol)?pol:[]);
    } catch(e) {}
    setLoading(false);
  };

  React.useEffect(()=>{ load(); },[]);

  const generate = async (type, data) => {
    setGenerating(type);
    try {
      await authFetch('/api/marketing/generate', {
        method:'POST', body: JSON.stringify({type, data})
      });
      alert('✓ Generating... refresh in 30 seconds');
      setTimeout(load, 30000);
    } catch(e) { alert('Failed: '+e.message); }
    setGenerating(null);
  };

  const updateStatus = async (id, status) => {
    await authFetch('/api/marketing/content/'+id, {
      method:'PATCH', body: JSON.stringify({status})
    });
    setContent(c => c.map(x => x.id===id ? {...x, status} : x));
  };

  const saveEdit = async (id) => {
    await authFetch('/api/marketing/content/'+id, {
      method:'PATCH', body: JSON.stringify({content: editText})
    });
    setContent(c => c.map(x => x.id===id ? {...x, content: editText} : x));
    setEditId(null);
  };

  const deleteContent = async (id) => {
    if (!confirm('Delete this content?')) return;
    await authFetch('/api/marketing/content/'+id, { method:'DELETE' });
    setContent(c => c.filter(x => x.id!==id));
  };

  const copyToClipboard = (text, id) => {
    navigator.clipboard.writeText(text).then(() => {
      setCopied(id);
      setTimeout(() => setCopied(null), 2000);
    });
  };

  const filtered = content.filter(c => {
    if (tab === 'drafts')   return c.status === 'draft';
    if (tab === 'approved') return c.status === 'approved';
    if (tab === 'archived') return c.status === 'archived';
    return true;
  }).filter(c => filter === 'all' || c.type === filter);

  const counts = {
    drafts:   content.filter(c=>c.status==='draft').length,
    approved: content.filter(c=>c.status==='approved').length,
    archived: content.filter(c=>c.status==='archived').length,
  };

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:24,flexWrap:'wrap',gap:12}}>
        <div>
          <h1 style={css.h1}>Marketing Agent</h1>
          <p style={{color:THEME.textMuted,fontSize:14,margin:'4px 0 0'}}>AI-generated content for LinkedIn, newsletters and campaigns</p>
        </div>
        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          <button style={{...css.btn(),fontSize:12,padding:'8px 14px'}}
            onClick={()=>generate('weekly_all',{})} disabled={generating==='weekly_all'}>
            {generating==='weekly_all'?'⏳ Generating...':'⚡ Generate All'}
          </button>
          <button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={load}>↻ Refresh</button>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(200px,1fr))',gap:10,marginBottom:24}}>
        {[
          {label:'Drafts', value:counts.drafts, color:THEME.gold},
          {label:'Approved', value:counts.approved, color:THEME.success},
          {label:'Total Generated', value:content.length, color:THEME.accent},
        ].map(s=>(
          <div key={s.label} style={{...css.card({}),padding:14}}>
            <div style={{fontSize:11,color:THEME.textMuted,marginBottom:4,textTransform:'uppercase',letterSpacing:'.06em'}}>{s.label}</div>
            <div style={{fontSize:24,fontWeight:800,color:s.color}}>{s.value}</div>
          </div>
        ))}
      </div>

      <div style={{display:'flex',gap:4,marginBottom:20,background:THEME.surfaceAlt,borderRadius:8,padding:4,width:'fit-content',border:`1px solid ${THEME.border}`}}>
        {[['drafts','✏️ Drafts'],['approved','✅ Approved'],['generate','🤖 Generate'],['archived','📦 Archived']].map(([t,l])=>(
          <button key={t} onClick={()=>setTab(t)}
            style={{...css.btn(tab===t?'ghost':''),padding:'6px 14px',fontSize:12,background:tab===t?THEME.surface:'transparent'}}>
            {l}{(t==='drafts'||t==='approved')&&counts[t]>0?` (${counts[t]})` :''}
          </button>
        ))}
      </div>

      {tab==='generate'&&(
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          <div style={css.card({})}>
            <h2 style={{...css.h2,marginBottom:16}}>Quick Generate</h2>
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(220px,1fr))',gap:10}}>
              {[
                {type:'membership',label:'💼 Membership Post',desc:'Individual or corporate join CTA'},
                {type:'newsletter',label:'📰 Newsletter Intro',desc:'Monthly email opening'},
                {type:'weekly_plan',label:'📅 Weekly Content Plan',desc:'5-post LinkedIn calendar'},
              ].map(g=>(
                <div key={g.type} style={{...css.card({}),padding:14}}>
                  <div style={{fontWeight:600,fontSize:13,marginBottom:4}}>{g.label}</div>
                  <div style={{fontSize:12,color:THEME.textMuted,marginBottom:12}}>{g.desc}</div>
                  <button style={{...css.btn(),fontSize:12,padding:'6px 14px',width:'100%'}}
                    onClick={()=>generate(g.type,{})} disabled={!!generating}>
                    {generating===g.type?'⏳ Generating...':'Generate →'}
                  </button>
                </div>
              ))}
            </div>
          </div>

          <div style={css.card({})}>
            <h2 style={{...css.h2,marginBottom:16}}>Generate from Events</h2>
            {events.filter(e=>e.status==='upcoming').length===0
              ? <div style={{color:THEME.textMuted,fontSize:13}}>No upcoming events found.</div>
              : <div style={{display:'flex',flexDirection:'column',gap:8}}>
                {events.filter(e=>e.status==='upcoming').map(e=>(
                  <div key={e.id} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 14px',background:THEME.surfaceAlt,borderRadius:8}}>
                    <div>
                      <div style={{fontSize:13,fontWeight:600}}>{e.title}</div>
                      <div style={{fontSize:11,color:THEME.textMuted}}>{new Date(e.start_date).toLocaleDateString('en-SG')}</div>
                    </div>
                    <button style={{...css.btn(),fontSize:11,padding:'5px 12px'}}
                      onClick={()=>generate('event',{id:e.id})} disabled={!!generating}>
                      {generating==='event'?'⏳':'📣 Generate'}
                    </button>
                  </div>
                ))}
              </div>
            }
          </div>

          <div style={css.card({})}>
            <h2 style={{...css.h2,marginBottom:16}}>Generate from Policy Reports</h2>
            {policies.length===0
              ? <div style={{color:THEME.textMuted,fontSize:13}}>No policy reports found. Run a policy scan first.</div>
              : <div style={{display:'flex',flexDirection:'column',gap:8}}>
                {policies.slice(0,5).map(p=>(
                  <div key={p.id} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 14px',background:THEME.surfaceAlt,borderRadius:8,gap:12}}>
                    <div style={{flex:1}}>
                      <div style={{fontSize:13,fontWeight:600}}>{p.title}</div>
                      <div style={{fontSize:11,color:THEME.textMuted}}>{p.country} · {p.severity}</div>
                    </div>
                    <button style={{...css.btn(),fontSize:11,padding:'5px 12px',flexShrink:0}}
                      onClick={()=>generate('policy',{id:p.id})} disabled={!!generating}>
                      {generating==='policy'?'⏳':'📣 Generate'}
                    </button>
                  </div>
                ))}
              </div>
            }
          </div>

          <div style={css.card({})}>
            <h2 style={{...css.h2,marginBottom:16}}>Generate from Courses</h2>
            {courses.length===0
              ? <div style={{color:THEME.textMuted,fontSize:13}}>No courses found.</div>
              : <div style={{display:'flex',flexDirection:'column',gap:8}}>
                {courses.slice(0,4).map(c=>(
                  <div key={c.id} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 14px',background:THEME.surfaceAlt,borderRadius:8}}>
                    <div>
                      <div style={{fontSize:13,fontWeight:600}}>{c.title}</div>
                      <div style={{fontSize:11,color:THEME.textMuted}}>{c.category} · S${c.fee}</div>
                    </div>
                    <button style={{...css.btn(),fontSize:11,padding:'5px 12px'}}
                      onClick={()=>generate('course',{id:c.id})} disabled={!!generating}>
                      {generating==='course'?'⏳':'📣 Generate'}
                    </button>
                  </div>
                ))}
              </div>
            }
          </div>
        </div>
      )}

      {tab!=='generate'&&(
        <div>
          <div style={{display:'flex',gap:8,marginBottom:16,flexWrap:'wrap'}}>
            <button onClick={()=>setFilter('all')} style={{...css.btn(filter==='all'?'primary':'ghost'),fontSize:11,padding:'4px 12px'}}>All Types</button>
            {Object.entries(TYPE_LABELS).map(([k,v])=>(
              <button key={k} onClick={()=>setFilter(k)}
                style={{...css.btn(filter===k?'primary':'ghost'),fontSize:11,padding:'4px 12px'}}>
                {v}
              </button>
            ))}
          </div>

          {loading?<Spinner/>:filtered.length===0?(
            <div style={{textAlign:'center',padding:40,color:THEME.textMuted}}>
              <div style={{fontSize:32,marginBottom:12}}>📣</div>
              <div style={{fontSize:15,fontWeight:600,color:THEME.text,marginBottom:8}}>No content yet</div>
              <button style={{...css.btn(),marginTop:8}} onClick={()=>setTab('generate')}>🤖 Generate Content</button>
            </div>
          ):(
            <div style={{display:'flex',flexDirection:'column',gap:12}}>
              {filtered.map(c=>(
                <div key={c.id} style={{...css.card({}),borderLeft:`3px solid ${TYPE_COLORS[c.type]||THEME.border}`}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:10,gap:8,flexWrap:'wrap'}}>
                    <div style={{display:'flex',gap:8,alignItems:'center',flexWrap:'wrap'}}>
                      <span style={{...css.badge(TYPE_COLORS[c.type]||THEME.accent),fontSize:10}}>{TYPE_LABELS[c.type]||c.type}</span>
                      <span style={{...css.badge(STATUS_COLORS[c.status]||THEME.textMuted),fontSize:10}}>{c.status}</span>
                      <span style={{fontSize:11,color:THEME.textMuted}}>{new Date(c.created_at).toLocaleDateString('en-SG',{day:'2-digit',month:'short'})}</span>
                    </div>
                    <div style={{display:'flex',gap:6}}>
                      <button style={{...css.btn('ghost'),padding:'4px 10px',fontSize:11}}
                        onClick={()=>copyToClipboard(c.content, c.id)}>
                        {copied===c.id?'✓ Copied':'📋 Copy'}
                      </button>
                      {c.status==='draft'&&<button style={{...css.btn(),padding:'4px 10px',fontSize:11,background:THEME.success,border:'none'}}
                        onClick={()=>updateStatus(c.id,'approved')}>✅ Approve</button>}
                      {c.status==='approved'&&<button style={{...css.btn('ghost'),padding:'4px 10px',fontSize:11}}
                        onClick={()=>updateStatus(c.id,'archived')}>📦 Archive</button>}
                      <button style={{...css.btn('ghost'),padding:'4px 10px',fontSize:11}}
                        onClick={()=>{setEditId(c.id);setEditText(c.content);}}>✏️</button>
                      <button style={{...css.btn('danger'),padding:'4px 10px',fontSize:11}}
                        onClick={()=>deleteContent(c.id)}>🗑</button>
                    </div>
                  </div>
                  {editId===c.id?(
                    <div>
                      <textarea style={{...css.input,width:'100%',height:200,fontFamily:'monospace',fontSize:12,resize:'vertical'}}
                        value={editText} onChange={e=>setEditText(e.target.value)}/>
                      <div style={{display:'flex',gap:8,marginTop:8}}>
                        <button style={{...css.btn(),fontSize:12}} onClick={()=>saveEdit(c.id)}>💾 Save</button>
                        <button style={{...css.btn('ghost'),fontSize:12}} onClick={()=>setEditId(null)}>Cancel</button>
                      </div>
                    </div>
                  ):(
                    <div style={{fontSize:13,color:THEME.text,lineHeight:1.7,whiteSpace:'pre-wrap',background:THEME.surfaceAlt,padding:14,borderRadius:8}}>
                      {c.content}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ── POLICY ADVISOR ────────────────────────────────────────
function PolicyAdvisor() {
  const [reports, setReports]   = React.useState([]);
  const [digests, setDigests]   = React.useState([]);
  const [stats, setStats]       = React.useState(null);
  const [loading, setLoading]   = React.useState(true);
  const [tab, setTab]           = React.useState('reports');
  const [scanning, setScanning] = React.useState(false);
  const [filter, setFilter]     = React.useState('all');
  const [severity, setSeverity] = React.useState('all');

  const COUNTRIES = ['all','Singapore','China','Japan','South Korea','India','ASEAN','EU','Global'];
  const SEVERITIES = ['high','medium','low'];
  const SEV_COLORS = { high: THEME.danger, medium: THEME.gold, low: THEME.success };

  const load = async () => {
    setLoading(true);
    try {
      const [r, d, s] = await Promise.all([
        authFetch('/api/policy/reports?limit=50').then(r=>r.json()),
        authFetch('/api/policy/digests').then(r=>r.json()),
        authFetch('/api/policy/stats').then(r=>r.json()),
      ]);
      setReports(Array.isArray(r)?r:[]);
      setDigests(Array.isArray(d)?d:[]);
      setStats(s);
    } catch(e) {}
    setLoading(false);
  };

  React.useEffect(()=>{ load(); }, []);

  const runScan = async (country) => {
    setScanning(country || 'all');
    try {
      const body = country && country!=='all' ? JSON.stringify({country}) : '{}';
      const r = await authFetch('/api/policy/scan', { method:'POST', body });
      const d = await r.json();
      alert(d.message || 'Scan started');
      setTimeout(load, 5000);
    } catch(e) { alert('Failed: '+e.message); }
    setScanning(false);
  };

  const runDigest = async () => {
    try {
      await authFetch('/api/policy/digest', { method:'POST' });
      alert('Digest generation started — refresh in 30 seconds');
      setTimeout(load, 35000);
    } catch(e) { alert('Failed: '+e.message); }
  };

  const filtered = reports
    .filter(r => filter==='all' || r.country===filter)
    .filter(r => severity==='all' || r.severity===severity);

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:24,flexWrap:'wrap',gap:12}}>
        <div>
          <h1 style={css.h1}>AI Policy Advisor</h1>
          <p style={{color:THEME.textMuted,fontSize:14,margin:'4px 0 0'}}>Real-time AI regulation tracking across Asia — powered by Claude web search</p>
        </div>
        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          <button style={{...css.btn(),fontSize:12,padding:'8px 14px'}} onClick={()=>runScan(null)} disabled={scanning==='all'}>
            {scanning==='all'?'Scanning...':'🔍 Full Scan'}
          </button>
          <button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={runDigest}>
            📋 Generate Digest
          </button>
          <button style={{...css.btn('ghost'),fontSize:12,padding:'8px 14px'}} onClick={load}>↻ Refresh</button>
        </div>
      </div>

      {stats && (
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(160px,1fr))',gap:12,marginBottom:24}}>
          {[
            {label:'Total Reports', value:stats.total_reports, color:THEME.purple},
            {label:'Countries Tracked', value:stats.by_country?.length||0, color:THEME.accent},
            {label:'Weekly Digests', value:stats.total_digests, color:THEME.success},
            {label:'High Priority', value:stats.by_severity?.find(s=>s.severity==='high')?.count||0, color:THEME.danger},
          ].map(s=>(
            <div key={s.label} style={{...css.card({}),padding:16}}>
              <div style={{fontSize:11,color:THEME.textMuted,marginBottom:6,textTransform:'uppercase',letterSpacing:'.06em'}}>{s.label}</div>
              <div style={{fontSize:26,fontWeight:800,color:s.color}}>{s.value}</div>
            </div>
          ))}
        </div>
      )}

      <div style={{display:'flex',gap:4,marginBottom:20,background:THEME.surfaceAlt,borderRadius:8,padding:4,width:'fit-content',border:`1px solid ${THEME.border}`}}>
        {['reports','digests','scan'].map(t=>(
          <button key={t} onClick={()=>setTab(t)}
            style={{...css.btn(tab===t?'ghost':''),padding:'6px 16px',fontSize:13,textTransform:'capitalize',background:tab===t?THEME.surface:'transparent'}}>
            {t==='reports'?'📋 Reports':t==='digests'?'📰 Digests':'🔍 Quick Scan'}
          </button>
        ))}
      </div>

      {tab==='reports'&&(
        <div>
          <div style={{display:'flex',gap:8,marginBottom:16,flexWrap:'wrap'}}>
            {COUNTRIES.map(c=>(
              <button key={c} onClick={()=>setFilter(c)}
                style={{...css.btn(filter===c?'primary':'ghost'),padding:'4px 12px',fontSize:11,textTransform:'capitalize'}}>
                {c}
              </button>
            ))}
          </div>
          <div style={{display:'flex',gap:8,marginBottom:16}}>
            {SEVERITIES.map(s=>(
              <button key={s} onClick={()=>setSeverity(severity===s?'all':s)}
                style={{...css.btn('ghost'),padding:'4px 12px',fontSize:11,color:severity===s?SEV_COLORS[s]:THEME.textMuted,borderColor:severity===s?SEV_COLORS[s]:THEME.border}}>
                {s==='high'?'🔴':s==='medium'?'🟡':'🟢'} {s}
              </button>
            ))}
          </div>
          {loading?<Spinner/>: filtered.length===0?(
            <div style={{textAlign:'center',padding:40,color:THEME.textMuted}}>
              <div style={{fontSize:32,marginBottom:12}}>⚖️</div>
              <div style={{fontSize:15,fontWeight:600,color:THEME.text,marginBottom:8}}>No reports yet</div>
              <div style={{fontSize:13}}>Run a scan to fetch the latest AI policy developments</div>
              <button style={{...css.btn(),marginTop:16}} onClick={()=>runScan(null)}>🔍 Run Full Scan Now</button>
            </div>
          ) : (
            <div style={{display:'flex',flexDirection:'column',gap:12}}>
              {filtered.map(r=>(
                <div key={r.id} style={{...css.card({}),borderLeft:`3px solid ${SEV_COLORS[r.severity]||THEME.border}`,padding:16}}>
                  <div style={{display:'flex',gap:8,marginBottom:8,flexWrap:'wrap',alignItems:'center'}}>
                    <span style={{...css.badge(THEME.purple),fontSize:10}}>{r.country}</span>
                    <span style={{...css.badge(THEME.accent),fontSize:10}}>{r.category}</span>
                    <span style={{...css.badge(SEV_COLORS[r.severity]),fontSize:10}}>{r.severity?.toUpperCase()}</span>
                    <span style={{fontSize:11,color:THEME.textMuted,marginLeft:'auto'}}>{new Date(r.created_at).toLocaleDateString('en-SG',{day:'2-digit',month:'short',year:'numeric'})}</span>
                  </div>
                  <div style={{fontSize:14,fontWeight:700,marginBottom:6}}>{r.title}</div>
                  <div style={{fontSize:13,color:THEME.textMuted,lineHeight:1.6,marginBottom:r.brief?10:0}}>{r.summary}</div>
                  {r.brief&&<div style={{fontSize:12,color:THEME.teal||'#2DD4BF',padding:'8px 12px',background:'rgba(45,212,191,0.05)',borderRadius:6,marginTop:8,lineHeight:1.5}}>💡 {r.brief}</div>}
                  {r.source_urls?.length>0&&<a href={r.source_urls[0]} target="_blank" style={{fontSize:11,color:THEME.accent,marginTop:8,display:'block'}}>Source →</a>}
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {tab==='digests'&&(
        <div>
          {loading?<Spinner/>:digests.length===0?(
            <div style={{textAlign:'center',padding:40,color:THEME.textMuted}}>
              <div style={{fontSize:32,marginBottom:12}}>📰</div>
              <div style={{fontSize:15,fontWeight:600,color:THEME.text,marginBottom:8}}>No digests yet</div>
              <button style={{...css.btn(),marginTop:8}} onClick={runDigest}>📋 Generate First Digest</button>
            </div>
          ):(
            <div style={{display:'flex',flexDirection:'column',gap:16}}>
              {digests.map(d=>(
                <div key={d.id} style={{...css.card({}),border:`1px solid ${THEME.purple}44`}}>
                  <div style={{fontSize:15,fontWeight:700,marginBottom:4}}>{d.title}</div>
                  <div style={{fontSize:12,color:THEME.textMuted,marginBottom:12}}>{d.period}</div>
                  {d.countries?.length>0&&(
                    <div style={{display:'flex',gap:6,flexWrap:'wrap',marginBottom:12}}>
                      {d.countries.map(c=><span key={c} style={{...css.badge(THEME.purple),fontSize:10}}>{c}</span>)}
                    </div>
                  )}
                  <div style={{fontSize:13,color:THEME.textMuted,lineHeight:1.8,whiteSpace:'pre-wrap'}}>{d.content}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {tab==='scan'&&(
        <div>
          <div style={{...css.card({}),marginBottom:16}}>
            <h2 style={{...css.h2,marginBottom:8}}>Quick Country Scan</h2>
            <p style={{fontSize:13,color:THEME.textMuted,marginBottom:16}}>Scan a specific country for the latest AI policy developments using Claude web search.</p>
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))',gap:10}}>
              {['Singapore','China','Japan','South Korea','India','ASEAN','EU','Global'].map(c=>(
                <button key={c} style={{...css.btn('ghost'),justifyContent:'space-between',padding:'10px 14px'}}
                  onClick={()=>runScan(c)} disabled={scanning===c}>
                  <span>{c}</span>
                  <span style={{fontSize:11,color:THEME.textMuted}}>{scanning===c?'Scanning...':'→'}</span>
                </button>
              ))}
            </div>
          </div>
          <div style={{...css.card({})}}>
            <h2 style={{...css.h2,marginBottom:8}}>Full Weekly Scan</h2>
            <p style={{fontSize:13,color:THEME.textMuted,marginBottom:16}}>Scan all 8 jurisdictions. Takes ~2 minutes. Runs automatically every Monday 7am SGT.</p>
            <button style={css.btn()} onClick={()=>runScan(null)} disabled={scanning==='all'}>
              {scanning==='all'?'⏳ Scanning all jurisdictions...':'🔍 Run Full Scan Now'}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// ── EMAIL AGENT ───────────────────────────────────────────
function EmailAgent() {
  const [log, setLog]       = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [running, setRunning] = React.useState(null);
  const [preview, setPreview] = React.useState(null);
  const [previewType, setPreviewType] = React.useState('welcome');
  const [previewName, setPreviewName] = React.useState('');
  const [previewLoading, setPreviewLoading] = React.useState(false);

  const loadLog = async () => {
    setLoading(true);
    try {
      const r = await authFetch('/api/email-agent/log');
      const d = await r.json();
      setLog(Array.isArray(d) ? d : []);
    } catch(e) {}
    setLoading(false);
  };

  React.useEffect(() => { loadLog(); }, []);

  const runFlow = async (flow) => {
    setRunning(flow);
    try {
      const r = await authFetch('/api/email-agent/run/' + flow, { method: 'POST' });
      const d = await r.json();
      if (d.success) { alert('Flow "' + flow + '" completed successfully!'); loadLog(); }
      else alert('Error: ' + (d.error || 'Unknown error'));
    } catch(e) { alert('Failed: ' + e.message); }
    setRunning(null);
  };

  const genPreview = async () => {
    if (!previewName) return alert('Enter a name to preview');
    setPreviewLoading(true);
    try {
      const data = { name: previewName, plan: 'Standard', type: 'individual',
        renewal_date: '1 June 2026', event_title: 'Asia AI Networking Night',
        event_date: 'Friday 1 June 2026 at 7:00 PM', event_location: 'Singapore' };
      const r = await authFetch('/api/email-agent/preview', {
        method: 'POST', body: JSON.stringify({ type: previewType, data })
      });
      const d = await r.json();
      setPreview(d.preview || d.error);
    } catch(e) { setPreview('Error: ' + e.message); }
    setPreviewLoading(false);
  };

  const flows = [
    { id:'welcome',   label:'Welcome',         desc:'New members in last 48h',     color:THEME.success },
    { id:'renewal',   label:'Renewal Reminders', desc:'30d / 7d / 1d before expiry', color:THEME.gold },
    { id:'event',     label:'Event Reminders',  desc:'24h before registered events', color:THEME.accent },
    { id:'postevent', label:'Post-Event',        desc:'1 day after events',          color:THEME.purple },
  ];

  const emailTypes = ['welcome','renewal_30','renewal_7','renewal_1','event_reminder','post_event'];

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:24}}>
        <div>
          <h1 style={css.h1}>Email Flow Agent</h1>
          <p style={{color:THEME.textMuted,fontSize:14,margin:'4px 0 0'}}>Claude-powered automated email sequences</p>
        </div>
        <button style={css.btn('ghost')} onClick={loadLog}>↻ Refresh Log</button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(220px,1fr))',gap:12,marginBottom:28}}>
        {flows.map(f => (
          <div key={f.id} style={{...css.card({}),display:'flex',flexDirection:'column',gap:8}}>
            <div style={{fontWeight:600,fontSize:14}}>{f.label}</div>
            <div style={{fontSize:12,color:THEME.textMuted,flex:1}}>{f.desc}</div>
            <button
              style={{...css.btn(),background:f.color,border:'none',fontSize:12,padding:'6px 12px'}}
              onClick={() => runFlow(f.id)}
              disabled={running === f.id}>
              {running === f.id ? 'Running...' : '▶ Run Now'}
            </button>
          </div>
        ))}
      </div>

      <div style={{...css.card({marginBottom:24})}}>
        <h2 style={{...css.h2,marginBottom:16}}>Email Preview</h2>
        <div style={{display:'flex',gap:10,marginBottom:12,flexWrap:'wrap'}}>
          <select style={{...css.input,width:200}} value={previewType} onChange={e=>setPreviewType(e.target.value)}>
            {emailTypes.map(t=><option key={t} value={t}>{t}</option>)}
          </select>
          <input style={{...css.input,flex:1,minWidth:160}} placeholder="Member name to preview..."
            value={previewName} onChange={e=>setPreviewName(e.target.value)}/>
          <button style={css.btn()} onClick={genPreview} disabled={previewLoading}>
            {previewLoading ? 'Generating...' : '👁 Preview'}
          </button>
        </div>
        {preview && (
          <div style={{background:THEME.surfaceAlt,border:`1px solid ${THEME.border}`,borderRadius:8,padding:16,fontSize:13,lineHeight:1.8,whiteSpace:'pre-wrap',maxHeight:320,overflowY:'auto'}}>
            {preview}
          </div>
        )}
      </div>

      <div style={css.card({padding:0,overflow:'hidden'})}>
        <div style={{padding:'14px 20px',borderBottom:`1px solid ${THEME.border}`,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <h2 style={css.h2}>Email Log</h2>
          <span style={{fontSize:12,color:THEME.textMuted}}>{log.length} emails sent</span>
        </div>
        {loading ? <Spinner/> : (
          <table style={{width:'100%',borderCollapse:'collapse'}}>
            <thead><tr style={{background:THEME.surfaceAlt}}>
              {['Member','Email type','Sent to','Date'].map(h=><th key={h} style={css.th}>{h}</th>)}
            </tr></thead>
            <tbody>
              {log.length === 0 && <tr><td colSpan={4} style={{...css.td,textAlign:'center',color:THEME.textMuted,padding:32}}>No emails sent yet. Run a flow above.</td></tr>}
              {log.map(e=>(
                <tr key={e.id}>
                  <td style={css.td}>{e.member_name||'—'}</td>
                  <td style={css.td}><span style={{...css.badge(THEME.accent),fontSize:10}}>{e.email_type}</span></td>
                  <td style={{...css.td,fontSize:12,color:THEME.textMuted}}>{e.sent_to}</td>
                  <td style={{...css.td,fontSize:12,color:THEME.textMuted}}>{new Date(e.sent_at).toLocaleString('en-SG',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'})}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

// ── PICTURE MANAGER ──────────────────────────────────────
function PictureManager() {
  const [pics, setPics]     = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [uploading, setUploading] = React.useState(false);
  const [search, setSearch] = React.useState('');
  const [copied, setCopied] = React.useState(null);
  const inputRef = React.useRef();

  const load = async () => {
    setLoading(true);
    try {
      const res = await authFetch('/api/pictures');
      const data = await res.json();
      setPics(Array.isArray(data) ? data : []);
    } catch(e) {}
    setLoading(false);
  };

  React.useEffect(() => { load(); }, []);

  const doUpload = async (files) => {
    if (!files.length) return;
    setUploading(true);
    for (const file of Array.from(files)) {
      try {
        const fd = new FormData();
        fd.append('image', file);
        const res = await authFetch('/api/pictures/upload', { method:'POST', body:fd });
        if (res.ok) { /* uploaded */ }
      } catch(e) {}
    }
    await load();
    setUploading(false);
  };

  const copyUrl = (url) => {
    const full = url.startsWith('http') ? url : 'https://asia-ai.org' + url;
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(full)
        .then(() => { setCopied(full); setTimeout(()=>setCopied(null),2000); })
        .catch(() => fallbackCopy(full));
    } else {
      fallbackCopy(full);
    }
  };

  const fallbackCopy = (text) => {
    const ta = document.createElement('textarea');
    ta.value = text;
    ta.style.position = 'fixed';
    ta.style.opacity = '0';
    document.body.appendChild(ta);
    ta.focus();
    ta.select();
    try {
      document.execCommand('copy');
      setCopied(text);
      setTimeout(()=>setCopied(null),2000);
    } catch(e) {
      prompt('Copy this URL:', text);
    }
    document.body.removeChild(ta);
  };

  const delPic = async (filename) => {
    if (!confirm('Delete ' + filename + '?')) return;
    await authFetch('/api/pictures/' + filename, { method:'DELETE' });
    setPics(ps => ps.filter(p => p.filename !== filename));
  };

  const filtered = pics.filter(p => p.filename.toLowerCase().includes(search.toLowerCase()));

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:24}}>
        <div><h1 style={css.h1}>Picture Manager</h1>
          <p style={{color:THEME.textMuted,fontSize:14,margin:'4px 0 0'}}>{pics.length} images at asia-ai.org/pictures/</p></div>
        <button style={css.btn()} onClick={()=>inputRef.current.click()} disabled={uploading}>
          {uploading ? '⏳ Uploading...' : '📁 Upload Images'}
        </button>
        <input ref={inputRef} type="file" accept="image/*" multiple style={{display:'none'}}
          onChange={e=>doUpload(e.target.files)}/>
      </div>
      <input style={{...css.input,marginBottom:20,maxWidth:320}} placeholder="Search images..."
        value={search} onChange={e=>setSearch(e.target.value)}/>
      <div
        style={{border:`2px dashed ${THEME.border}`,borderRadius:12,padding:24,textAlign:'center',
          marginBottom:24,color:THEME.textMuted,cursor:'pointer'}}
        onClick={()=>inputRef.current.click()}
        onDragOver={e=>{e.preventDefault();e.currentTarget.style.borderColor=THEME.accent;}}
        onDragLeave={e=>e.currentTarget.style.borderColor=THEME.border}
        onDrop={e=>{e.preventDefault();e.currentTarget.style.borderColor=THEME.border;doUpload(e.dataTransfer.files);}}
      >
        {uploading ? '⏳ Uploading images...' : '📁 Drag & drop images here or click to upload'}
        <div style={{fontSize:12,marginTop:4}}>JPG, PNG, GIF, WebP, SVG — max 10MB each</div>
      </div>
      {loading ? <Spinner/> : (
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(160px,1fr))',gap:12}}>
          {filtered.map(p => (
            <div key={p.filename} style={{...css.card({padding:0,overflow:'hidden'}),position:'relative'}}>
              <img src={p.url} alt={p.filename}
                style={{width:'100%',height:120,objectFit:'cover',display:'block'}}
                onError={e=>{e.target.style.display='none';}}/>
              <div style={{padding:'8px 10px'}}>
                <div style={{fontSize:11,color:THEME.textMuted,wordBreak:'break-all',marginBottom:6,
                  whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{p.filename}</div>
                <div style={{fontSize:10,color:THEME.textFaint,marginBottom:8}}>
                  {p.size ? (p.size/1024).toFixed(0)+'KB' : ''}
                </div>
                <div style={{display:'flex',gap:4}}>
                  <button style={{...css.btn('ghost'),padding:'3px 8px',fontSize:11,flex:1,
                    background:copied===p.url?THEME.success:'',color:copied===p.url?'#fff':''}}
                    onClick={()=>copyUrl(p.url)}>
                    {copied===p.url?'✓ Copied!':'📋 Copy URL'}
                  </button>
                  <button style={{...css.btn('danger'),padding:'3px 8px',fontSize:11}}
                    onClick={()=>delPic(p.filename)}>🗑</button>
                </div>
              </div>
            </div>
          ))}
          {filtered.length===0&&<div style={{gridColumn:'1/-1',textAlign:'center',padding:32,color:THEME.textMuted}}>
            {search ? 'No images match your search.' : 'No images yet. Upload some!'}
          </div>}
        </div>
      )}
    </div>
  );
}

// ── APPLICATIONS ──────────────────────────────────────────
function Applications() {
  const [apps, setApps]         = useState([]);
  const [loading, setLoading]   = useState(true);
  const [filter, setFilter]     = useState('all');
  const [pwForm, setPwForm]     = useState(null);
  const [pwRef, setPwRef]       = useState('');

  useEffect(() => {
    authFetch('/api/applications').then(r=>r.json()).then(d=>{ setApps(Array.isArray(d)?d:[]); setLoading(false); });
  }, []);

  const confirmPayNow = async (app) => {
    if (!pwRef) return alert('Enter PayNow reference.');
    const res = await authFetch('/api/payment/paynow/confirm', {
      method:'POST', body:JSON.stringify({ application_id:app.id, paynow_ref:pwRef })
    }).then(r=>r.json());
    if (res.success) {
      setApps(as => as.map(a => a.id===app.id ? {...a, status:'paid'} : a));
      setPwForm(null); setPwRef('');
      alert('Membership activated!');
    } else alert(res.error||'Failed.');
  };

  const filtered = apps.filter(a => filter==='all' || a.status===filter || a.type===filter);

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:24}}>
        <div><h1 style={css.h1}>Membership Applications</h1><p style={{color:THEME.textMuted,margin:'4px 0 0',fontSize:14}}>New signups from the public portal — confirm PayNow payments here</p></div>
      </div>
      <div style={{display:'flex',gap:8,marginBottom:20,flexWrap:'wrap'}}>
        {['all','pending','paid','individual','corporate'].map(f=>(
          <button key={f} style={{...css.btn(filter===f?'primary':'ghost'),textTransform:'capitalize',fontSize:12}} onClick={()=>setFilter(f)}>{f}</button>
        ))}
      </div>
      {loading ? <div style={{textAlign:'center',padding:40,color:THEME.textMuted}}>Loading...</div> : (
        <div style={css.card({padding:0,overflow:'hidden'})}>
          <table style={{width:'100%',borderCollapse:'collapse'}}>
            <thead><tr style={{background:THEME.surfaceAlt}}>
              {['Name / Company','Type','Plan','Amount','Applied','Payment','Status',''].map(h=><th key={h} style={css.th}>{h}</th>)}
            </tr></thead>
            <tbody>
              {filtered.map(a=>(
                <tr key={a.id}>
                  <td style={css.td}>
                    <div style={{fontWeight:600}}>{a.full_name||a.company_name}</div>
                    <div style={{fontSize:11,color:THEME.textMuted}}>{a.email||a.contact_email}</div>
                  </td>
                  <td style={css.td}><span style={css.badge(a.type==='corporate'?THEME.gold:THEME.purple)}>{a.type}</span></td>
                  <td style={{...css.td,fontSize:12}}>{a.plan}</td>
                  <td style={{...css.td,fontWeight:700}}>S${Number(a.amount).toFixed(0)}</td>
                  <td style={{...css.td,fontSize:11,color:THEME.textMuted}}>{fmtDate(a.applied_at||a.created_at)}</td>
                  <td style={css.td}>{a.payment_method?<span style={css.badge(THEME.purple)}>{a.payment_method}</span>:<span style={{fontSize:11,color:THEME.textMuted}}>—</span>}</td>
                  <td style={css.td}><span style={css.badge(a.status==='paid'?THEME.success:a.status==='pending'?THEME.gold:THEME.danger)}>{a.status}</span></td>
                  <td style={css.td}>
                    {a.status==='pending' && !a.payment_method && (
                      pwForm===a.id ? (
                        <div style={{display:'flex',gap:6,alignItems:'center'}}>
                          <input style={{...css.input,width:120,padding:'4px 8px',fontSize:12}} placeholder="PayNow ref" value={pwRef} onChange={e=>setPwRef(e.target.value)}/>
                          <button style={{...css.btn(),padding:'4px 10px',fontSize:11}} onClick={()=>confirmPayNow(a)}>Confirm</button>
                          <button style={{...css.btn('ghost'),padding:'4px 8px',fontSize:11}} onClick={()=>setPwForm(null)}>✕</button>
                        </div>
                      ) : (
                        <button style={{...css.btn('gold'),padding:'4px 10px',fontSize:11}} onClick={()=>{setPwForm(a.id);setPwRef('');}}>Confirm PayNow</button>
                      )
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {filtered.length===0&&<div style={{textAlign:'center',padding:32,color:THEME.textMuted}}>No applications found.</div>}
        </div>
      )}
    </div>
  );
}

// ── RENEWALS ──────────────────────────────────────────────
function Renewals() {
  const [renewals, setRenewals] = useState([]);
  const [loading, setLoading]   = useState(true);
  const [tab, setTab]           = useState('upcoming');

  useEffect(() => {
    authFetch('/api/renewals/upcoming').then(r=>r.json()).then(d=>{ setRenewals(Array.isArray(d)?d:[]); setLoading(false); });
  }, []);

  const sendRenewalLink = async (member) => {
    const res = await authFetch('/api/renewals/stripe', {
      method:'POST', body:JSON.stringify({ member_id:member.id })
    }).then(r=>r.json());
    if (res.checkout_url) {
      navigator.clipboard.writeText(res.checkout_url).catch(()=>{});
      alert(`Renewal link copied to clipboard!

${res.checkout_url}

Share this link with ${member.name} to complete renewal.`);
    } else alert(res.error||'Failed to generate link.');
  };

  const daysUntil = (date) => {
    const d = Math.ceil((new Date(date)-new Date())/(1000*60*60*24));
    return d;
  };

  const urgencyColor = (days) => days <= 7 ? THEME.danger : days <= 14 ? THEME.gold : THEME.success;

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:24}}>
        <div><h1 style={css.h1}>Membership Renewals</h1><p style={{color:THEME.textMuted,margin:'4px 0 0',fontSize:14}}>Members with renewals due in the next 30 days</p></div>
      </div>
      <div style={{...css.card({marginBottom:24,background:THEME.surfaceAlt,border:`1px solid ${THEME.gold}44`}),display:'flex',gap:24,flexWrap:'wrap'}}>
        {[['Due this week',renewals.filter(m=>daysUntil(m.renewal_date)<=7).length,THEME.danger],['Due in 14 days',renewals.filter(m=>daysUntil(m.renewal_date)<=14).length,THEME.gold],['Due in 30 days',renewals.length,THEME.success]].map(([l,v,c])=>(
          <div key={l} style={{textAlign:'center',flex:1,minWidth:120}}>
            <div style={{fontFamily:'Syne',fontSize:28,fontWeight:800,color:c}}>{v}</div>
            <div style={{fontSize:12,color:THEME.textMuted}}>{l}</div>
          </div>
        ))}
      </div>
      {loading ? <div style={{textAlign:'center',padding:40,color:THEME.textMuted}}>Loading...</div> : (
        <div style={css.card({padding:0,overflow:'hidden'})}>
          <table style={{width:'100%',borderCollapse:'collapse'}}>
            <thead><tr style={{background:THEME.surfaceAlt}}>
              {['Member','Type','Plan','Renewal Date','Days Left','Action'].map(h=><th key={h} style={css.th}>{h}</th>)}
            </tr></thead>
            <tbody>
              {renewals.map(m=>{
                const days = daysUntil(m.renewal_date);
                return (
                  <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></td>
                    <td style={css.td}><span style={css.badge(m.type==='corporate'?THEME.gold:THEME.purple)}>{m.type}</span></td>
                    <td style={{...css.td,fontSize:12}}>{m.plan}</td>
                    <td style={{...css.td,fontSize:12,color:THEME.textMuted}}>{fmtDate(m.renewal_date)}</td>
                    <td style={css.td}><span style={{...css.badge(urgencyColor(days)),fontSize:11}}>{days <= 0 ? 'EXPIRED' : `${days} days`}</span></td>
                    <td style={css.td}>
                      <button style={{...css.btn(),padding:'5px 12px',fontSize:12}} onClick={()=>sendRenewalLink(m)}>
                        📋 Copy Renewal Link
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          {renewals.length===0&&<div style={{textAlign:'center',padding:32,color:THEME.textMuted}}>No renewals due in the next 30 days.</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:'events',      icon:'📅', label:'Events', href:'/events' },
  { id:'pictures',    icon:'🖼️',  label:'Pictures' },
  { id:'emailagent',  icon:'📧',  label:'Email Agent' },
  { id:'policy',      icon:'⚖️',  label:'Policy Advisor' },
  { id:'marketing',   icon:'📣',  label:'Marketing Agent' },
  { id:'research',    icon:'🔬',  label:'Research Synthesizer' },
  { id:'community',   icon:'🤝',  label:'Community Agent' },
  { id:'volunteer',   icon:'🙋',  label:'Volunteer Matcher' },
  { id:'grants',      icon:'💰',  label:'Partnership Agent' },
  { id:'ethics',      icon:'⚖️',  label:'Ethics Auditor' },
  { id:'skills',      icon:'🎯',  label:'AI Skills Coach' },
  { id:'users',        icon:'🔑', label:'User Management'  },
  { id:'applications', icon:'📝', label:'Applications'      },
  { id:'renewals',     icon:'🔄', label:'Renewals'           },
];

function useIsMobile() {
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return isMobile;
}

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);
  const isMobile                     = useIsMobile();

  useEffect(()=>{
    if (!currentUser||!getToken()) { setLoading(false); return; }
    setLoading(true);
    // Validate token is still valid, then load fresh data
    authFetch('/api/auth/me')
      .then(r => {
        if (!r.ok) { clearAuth(); window.location.reload(); return null; }
        return r.json();
      })
      .then(data => {
        if (!data) return;
        // /api/auth/me returns { user: {...} } — unwrap it
        const me = data.user || data;
        if (!me || !me.id) { clearAuth(); window.location.reload(); return null; }
        // Update user in case role/details changed
        saveAuth(getToken(), me);
        setCurrentUser(me);
        return Promise.all([api.getMembers(),api.getCourses(),api.getEnrollments(),api.getPayments()]);
      })
      .then(res => {
        if (!res) return;
        const [m,c,e,p] = res;
        setMembers(Array.isArray(m)?m:[]);
        setCourses(Array.isArray(c)?c:[]);
        setEnrollments(Array.isArray(e)?e:[]);
        setPayments(Array.isArray(p)?p:[]);
      })
      .catch(()=>{ clearAuth(); window.location.reload(); })
      .finally(()=>setLoading(false));
  },[]);

  const handleLogin  = (user) => { setCurrentUser(user); };
  const handleLogout = () => { clearAuth(); window.location.href = '/members'; };

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

  const renderPage = () => {
    if (loading) return <div style={{display:'flex',alignItems:'center',justifyContent:'center',height:'60vh'}}><Spinner/></div>;
    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} setEnrollments={setEnrollments}/>;
      case 'payments':    return <Payments payments={payments} setPayments={setPayments} members={members}/>;
      case 'pictures':   return <PictureManager/>;
      case 'emailagent':  return <EmailAgent/>;
      case 'policy':      return <PolicyAdvisor/>;
      case 'marketing':   return <MarketingAgent/>;
      case 'research':    return <ResearchSynthesizer/>;
      case 'community':   return <CommunityAgent/>;
      case 'volunteer':   return <VolunteerMatcher/>;
      case 'grants':      return <PartnershipAgent/>;
      case 'ethics':      return <EthicsAuditor/>;
      case 'skills':      return <SkillsCoach/>;
      case 'reports':     return <Reports members={members} courses={courses} payments={payments} enrollments={enrollments}/>;
      case 'users':        return <UserManagement currentUser={currentUser}/>;
      case 'applications': return <Applications/>;
      case 'renewals':     return <Renewals/>;
      default:            return <Dashboard members={members} courses={courses} enrollments={enrollments} payments={payments}/>;
    }
  };

  const [menuOpen, setMenuOpen] = React.useState(false);
  const [mobile, setMobile] = React.useState(window.innerWidth < 768);

  React.useEffect(() => {
    const handleResize = () => setMobile(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const mainPadding = mobile ? '16px 12px 80px' : '32px 36px';

  const navItems = NAV.map(n => (
    <div key={n.id} data-page={n.id}
      style={css.navItem(page===n.id)}
      onClick={()=>{ if(n.href){window.open(n.href,'_blank');}else{setPage(n.id);setMenuOpen(false);} }}>
      <span style={{fontSize:16}}>{n.icon}</span>
      <span>{n.id==='users' && currentUser?.role!=='admin' ? 'My Profile' : n.label}</span>
      {n.href&&<span style={{fontSize:9,color:THEME.textFaint,marginLeft:'auto'}}>↗</span>}
    </div>
  ));

  const userPanel = (
    <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>
  );

  const logoHeader = (showClose) => (
    <div style={{padding:'20px 20px 16px',borderBottom:`1px solid ${THEME.border}`}}>
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <a href="https://asia-ai.org" style={{display:'flex',alignItems:'center',gap:10,textDecoration:'none',flex:1,cursor:'pointer'}}>
          <AsiaAILogo size={64}/>
          <div>
            <div style={{fontSize:15,fontWeight:800,color:THEME.accent}}>Asia AI</div>
            <div style={{fontSize:10,color:THEME.textMuted,marginTop:1}}>Association Platform</div>
          </div>
        </a>
        {showClose && (
          <button onClick={()=>setMenuOpen(false)}
            style={{marginLeft:'auto',background:'transparent',border:'none',color:THEME.textMuted,fontSize:24,cursor:'pointer',lineHeight:1}}>✕</button>
        )}
      </div>
    </div>
  );

  return (
    <div style={{...css.wrap, flexDirection:'column'}}>

      {/* Mobile top bar */}
      {mobile && (
        <div style={{display:'flex',alignItems:'center',padding:'10px 14px',background:THEME.surface,borderBottom:`1px solid ${THEME.border}`,position:'sticky',top:0,zIndex:200,gap:10,flexShrink:0}}>
          <button onClick={()=>setMenuOpen(true)}
            style={{background:'transparent',border:`1px solid ${THEME.border}`,borderRadius:8,color:THEME.text,fontSize:20,cursor:'pointer',padding:'5px 10px',lineHeight:1}}>☰</button>
          <a href="https://asia-ai.org" style={{display:'flex',alignItems:'center',gap:8,textDecoration:'none'}}>
            <AsiaAILogo size={36}/>
            <span style={{fontSize:14,fontWeight:800,color:THEME.accent}}>Asia AI</span>
          </a>
          <span style={{marginLeft:'auto',fontSize:11,color:THEME.textMuted,maxWidth:120,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{currentUser.name}</span>
        </div>
      )}

      <div style={{display:'flex',flex:1,minHeight:0,flexDirection:'row'}}>

        {/* Desktop sidebar */}
        {!mobile && (
          <div style={css.sidebar}>
            {logoHeader(false)}
            <nav style={{padding:'16px 12px',flex:1,overflowY:'auto'}}>
              <div style={{fontSize:10,fontWeight:700,color:THEME.textFaint,letterSpacing:'.1em',textTransform:'uppercase',padding:'0 12px',marginBottom:8}}>Main Menu</div>
              {navItems}
            </nav>
            {userPanel}
          </div>
        )}

        {/* Mobile drawer overlay */}
        {mobile && menuOpen && (
          <div style={{position:'fixed',inset:0,zIndex:1000}} onClick={()=>setMenuOpen(false)}>
            <div style={{position:'absolute',inset:0,background:'rgba(0,0,0,0.55)'}}/>
            <div style={{position:'absolute',top:0,left:0,width:280,height:'100%',background:THEME.surface,display:'flex',flexDirection:'column',boxShadow:'4px 0 32px rgba(0,0,0,0.5)'}}
              onClick={e=>e.stopPropagation()}>
              {logoHeader(true)}
              <nav style={{padding:'16px 12px',flex:1,overflowY:'auto'}}>
                <div style={{fontSize:10,fontWeight:700,color:THEME.textFaint,letterSpacing:'.1em',textTransform:'uppercase',padding:'0 12px',marginBottom:8}}>Main Menu</div>
                {navItems}
              </nav>
              {userPanel}
            </div>
          </div>
        )}

        {/* Main content */}
        <main style={{...css.main, padding:mainPadding, flex:1, overflow:'auto'}}>
          {renderPage()}
        </main>

      </div>
    </div>
  );
}

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