// ===== ACCOUNT: role-aware Profile · Responder registration · Admin console =====

const RESP_KEY = 'nrsa_responder';
const ID_TYPES = ['Driver\u2019s License', 'Passport', 'PhilSys National ID', 'UMID', 'Postal ID', 'Voter\u2019s ID'];
const INDUSTRIES = ['Government / Public Sector', 'Transport & Logistics', 'Healthcare & Medical', 'Education', 'IT / BPO', 'Construction & Engineering', 'Retail & Services', 'Manufacturing', 'Other'];
const CERTS = ['First Aid', 'BLS / CPR', 'Traffic Management', 'Emergency Response', 'Firefighting', 'Defensive Driving', 'None yet'];

function getResp() { try { return JSON.parse(localStorage.getItem(RESP_KEY)) || null; } catch (e) { return null; } }
function setResp(v) { localStorage.setItem(RESP_KEY, JSON.stringify(v)); }

// ---- small form primitives ----
function FLabel({ t, children, hint }) {
  return (
    <div style={{ marginBottom: 7 }}>
      <span style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: '0.02em' }}>{children}</span>
      {hint && <span style={{ fontSize: 11, color: t.subtext, fontWeight: 500, marginLeft: 6 }}>{hint}</span>}
    </div>
  );
}
function fieldStyle(t) {
  return { width: '100%', border: `1.5px solid ${t.border}`, background: t.inputBg, color: t.text, borderRadius: 13, padding: '12px 13px', outline: 'none', fontWeight: 500, fontSize: 14.5 };
}
function TInput({ t, value, onChange, placeholder, type = 'text', inputMode }) {
  return <input type={type} inputMode={inputMode} value={value || ''} onChange={e => onChange(e.target.value)} placeholder={placeholder} style={fieldStyle(t)} />;
}
function TArea({ t, value, onChange, placeholder, rows = 3 }) {
  return <textarea rows={rows} value={value || ''} onChange={e => onChange(e.target.value)} placeholder={placeholder} style={{ ...fieldStyle(t), resize: 'none', lineHeight: 1.5 }} />;
}
function Sel({ t, value, onChange, options, placeholder = 'Select…' }) {
  return (
    <div style={{ position: 'relative' }}>
      <select value={value || ''} onChange={e => onChange(e.target.value)} style={{ ...fieldStyle(t), appearance: 'none', WebkitAppearance: 'none', paddingRight: 40, color: value ? t.text : t.subtext }}>
        <option value="">{placeholder}</option>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
      <span style={{ position: 'absolute', right: 13, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', color: t.subtext }}><Icon name="chevron-down" size={18} /></span>
    </div>
  );
}
function ChipSelect({ t, options, value, onChange, multi }) {
  const arr = multi ? (Array.isArray(value) ? value : []) : value;
  const toggle = (o) => {
    if (multi) onChange(arr.includes(o) ? arr.filter(x => x !== o) : [...arr, o]);
    else onChange(value === o ? '' : o);
  };
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      {options.map(o => <Pill key={o} t={t} active={multi ? arr.includes(o) : value === o} onClick={() => toggle(o)} color={t.mid} style={{ minHeight: 38 }}>{o}</Pill>)}
    </div>
  );
}

// ===== ROLE-AWARE PROFILE =====
function ProfileScreen({ t, go, dark, setDark, user, onLogout, updateUser, consent, onWithdrawConsent }) {
  const p = profile;
  const u = user || {};
  const [privacyOpen, setPrivacyOpen] = useState(false);
  const isAdmin = u.role === 'admin';
  const [resp, setRespState] = useState(getResp());
  const [editing, setEditing] = useState(false);
  const fileRef = useRef(null);

  const [form, setForm] = useState({
    name: u.name || '', email: u.email || '', age: u.age || '', address: u.address || '',
    occupation: u.occupation || '', school: u.school || '', industry: u.industry || '',
  });
  const setF = (k, v) => setForm(s => ({ ...s, [k]: v }));
  const saveInfo = () => { updateUser({ ...form }); setEditing(false); };

  const displayName = u.name || p.name;
  const methodLabel = { google: 'Google', facebook: 'Facebook', apple: 'Apple', mobile: u.phone || 'Mobile', admin: u.email || 'Admin' }[u.method] || 'Account';
  const isStudent = u.occupation === 'studying';
  const respApproved = resp && resp.status === 'approved';
  const respPending = resp && resp.status === 'pending';

  const onPickId = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    updateUser({ verified: true, idFile: f.name, idType: u.idType || ID_TYPES[0] });
  };

  // role chips
  const chips = [];
  if (isAdmin) chips.push({ label: 'Administrator', color: t.gold });
  else {
    chips.push({ label: 'Driver', color: t.mid });
    if (isStudent) chips.push({ label: 'Student', color: '#7b2d8b' });
    if (respApproved) chips.push({ label: 'Crash Responder', color: t.accent });
    else if (respPending) chips.push({ label: 'Responder · Pending', color: t.warn });
  }

  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Header */}
      <Card t={t} style={{ textAlign: 'center', background: `linear-gradient(135deg, ${t.navy}, ${isAdmin ? '#6a4b12' : t.mid})`, border: 'none', color: '#fff', padding: 22 }}>
        <div style={{ position: 'relative', width: 80, height: 80, margin: '0 auto 12px' }}>
          <div style={{ fontSize: 46, width: 80, height: 80, borderRadius: 999, background: 'rgba(255,255,255,0.16)', display: 'grid', placeItems: 'center' }}>{isAdmin ? '🛡️' : p.avatar}</div>
          {(u.verified || isAdmin) && <span title="Verified" style={{ position: 'absolute', bottom: 0, right: 0, width: 26, height: 26, borderRadius: 999, background: t.success, border: `3px solid ${t.navy}`, display: 'grid', placeItems: 'center' }}><Icon name="check" size={13} color="#fff" strokeWidth={3} /></span>}
        </div>
        <div style={{ fontSize: 20, fontWeight: 800 }}>{displayName}</div>
        <div style={{ fontSize: 12.5, opacity: 0.8, marginTop: 3 }}>Signed in with {methodLabel}</div>
        <div style={{ display: 'flex', gap: 7, justifyContent: 'center', flexWrap: 'wrap', marginTop: 12 }}>
          {chips.map(c => (
            <span key={c.label} style={{ fontSize: 11, fontWeight: 800, color: '#fff', background: c.color, borderRadius: 999, padding: '5px 11px' }}>{c.label}</span>
          ))}
          {!isAdmin && (u.verified
            ? <span style={{ fontSize: 11, fontWeight: 800, color: t.navy, background: '#fff', borderRadius: 999, padding: '5px 11px', display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="check" size={12} strokeWidth={3} />Verified</span>
            : <span style={{ fontSize: 11, fontWeight: 700, color: '#fff', background: 'rgba(255,255,255,0.18)', borderRadius: 999, padding: '5px 11px' }}>Unverified</span>)}
        </div>
        {!isAdmin && (
          <div style={{ display: 'flex', marginTop: 18, background: 'rgba(255,255,255,0.12)', borderRadius: 16, overflow: 'hidden' }}>
            {p.stats.map((s, i) => (
              <div key={s.label} style={{ flex: 1, padding: '12px 4px', borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.18)' : 'none' }}>
                <div style={{ fontSize: 22, fontWeight: 800 }}>{s.value}</div>
                <div style={{ fontSize: 10.5, opacity: 0.8, fontWeight: 600 }}>{s.label}</div>
              </div>
            ))}
          </div>
        )}
      </Card>

      {/* ===== ADMIN ===== */}
      {isAdmin ? (
        <Card t={t} pad={16} style={{ background: `linear-gradient(135deg, ${t.dark ? '#161b22' : '#fff'}, ${t.gold}14)` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <IconTile icon="🗂️" color={t.gold} t={t} size={46} fontSize={22} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 800, color: t.text }}>Administrative access granted</div>
              <div style={{ fontSize: 12.5, color: t.subtext, marginTop: 2, lineHeight: 1.4 }}>Manage records, verify responders, and oversee agency syncing.</div>
            </div>
          </div>
          <Btn t={t} full color={t.gold} onClick={() => go('AdminConsole')} style={{ marginTop: 14 }} icon="settings">Open Admin Console</Btn>
        </Card>
      ) : (
        <>
          {/* ===== Identity verification ===== */}
          {u.verified ? (
            <Card t={t} pad={14} style={{ background: t.success + (t.dark ? '1a' : '0f'), border: `1px solid ${t.success}44` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 44, height: 44, borderRadius: 13, background: t.success, display: 'grid', placeItems: 'center' }}><Icon name="check" size={24} color="#fff" strokeWidth={3} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 800, color: t.text }}>Identity verified</div>
                  <div style={{ fontSize: 12, color: t.subtext, marginTop: 2 }}>{u.idType} · {u.idFile || 'document on file'}</div>
                </div>
              </div>
            </Card>
          ) : (
            <Card t={t} pad={16}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 12 }}>
                <IconTile icon="🪪" color={t.mid} t={t} size={44} fontSize={22} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 800, color: t.text }}>Verify your identity</div>
                  <div style={{ fontSize: 12.5, color: t.subtext, marginTop: 3, lineHeight: 1.45 }}>Upload a valid ID to unlock a verified account, incident reporting, and Crash Responder eligibility.</div>
                </div>
              </div>
              <FLabel t={t}>ID TYPE</FLabel>
              <Sel t={t} value={u.idType} onChange={v => updateUser({ idType: v })} options={ID_TYPES} placeholder="Select a valid ID" />
              <input ref={fileRef} type="file" accept="image/*,.pdf" onChange={onPickId} style={{ display: 'none' }} />
              <Btn t={t} full color={t.mid} onClick={() => { if (!u.idType) { updateUser({ idType: ID_TYPES[0] }); } fileRef.current && fileRef.current.click(); }} style={{ marginTop: 12 }} icon="plus">Upload {u.idType || 'ID'} photo</Btn>
            </Card>
          )}

          {/* ===== Crash Responder recruitment ===== */}
          {respApproved ? (
            <Card t={t} pad={16} style={{ background: t.accent + (t.dark ? '1a' : '0d'), border: `1px solid ${t.accent}44` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <IconTile icon="🚨" color={t.accent} t={t} size={46} fontSize={22} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 800, color: t.text }}>You're a verified Crash Responder</div>
                  <div style={{ fontSize: 12.5, color: t.subtext, marginTop: 2 }}>{resp.org || 'NRSA-accredited responder'}</div>
                </div>
              </div>
              <Btn t={t} full color={t.accent} onClick={() => go('CrashReport')} style={{ marginTop: 13 }} icon="alert">Open Crash Report intake</Btn>
            </Card>
          ) : respPending ? (
            <Card t={t} pad={16} style={{ background: t.warn + (t.dark ? '1a' : '0f'), border: `1px solid ${t.warn}55` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <IconTile icon="⏳" color={t.warn} t={t} size={46} fontSize={22} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 800, color: t.text }}>Application under review</div>
                  <div style={{ fontSize: 12.5, color: t.subtext, marginTop: 2, lineHeight: 1.4 }}>Your Crash Responder application is being verified by NRSA. You'll be notified once approved.</div>
                </div>
              </div>
            </Card>
          ) : (
            <Card t={t} pad={0} onClick={() => go('ResponderRegister')} style={{ cursor: 'pointer', overflow: 'hidden', border: `1.5px solid ${t.accent}55` }}>
              <div style={{ background: `linear-gradient(135deg, ${t.accent}, #d8531a)`, padding: '16px', color: '#fff', display: 'flex', alignItems: 'center', gap: 13 }}>
                <div style={{ fontSize: 30 }}>🚨</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 16, fontWeight: 800 }}>Become a Crash Responder</div>
                  <div style={{ fontSize: 12, opacity: 0.9, marginTop: 2 }}>Join the national rapid-reporting network</div>
                </div>
                <Icon name="chevron-right" size={22} />
              </div>
              <div style={{ padding: 15 }}>
                <div style={{ fontSize: 12.5, color: t.subtext, lineHeight: 1.5, marginBottom: 11 }}>
                  Crash Responders submit GPS-tagged crash records straight into the National Road Crash Database, replacing paper forms and speeding up EMS dispatch.
                </div>
                {[['📍', 'Submit real-time, GPS-tagged crash reports'], ['🚑', 'Trigger faster EMS & hospital handoff'], ['🎖️', 'Earn an NRSA-accredited responder badge'], ['📊', 'Help close the PRSAP data gaps nationwide']].map(([ic, txt]) => (
                  <div key={txt} style={{ display: 'flex', gap: 9, alignItems: 'center', padding: '5px 0' }}>
                    <span style={{ fontSize: 15 }}>{ic}</span>
                    <span style={{ fontSize: 12.5, color: t.text, fontWeight: 500 }}>{txt}</span>
                  </div>
                ))}
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 11, padding: '9px 11px', borderRadius: 10, background: t.inputBg }}>
                  <Icon name="shield" size={15} color={t.mid} />
                  <span style={{ fontSize: 11.5, color: t.subtext, fontWeight: 600 }}>Requires qualification & identity verification</span>
                </div>
                <Btn t={t} full color={t.accent} style={{ marginTop: 13 }} icon="chevron-right">Apply now</Btn>
              </div>
            </Card>
          )}

          {/* ===== Personal information ===== */}
          <div>
            <SectionTitle t={t} action={
              <button onClick={() => editing ? saveInfo() : setEditing(true)} className="no-select" style={{ background: editing ? t.success : t.mid + (t.dark ? '33' : '18'), color: editing ? '#fff' : t.mid, border: 'none', borderRadius: 999, padding: '7px 14px', fontSize: 12.5, fontWeight: 700, minHeight: 34 }}>{editing ? 'Save' : 'Edit'}</button>
            }>Personal Information</SectionTitle>
            <Card t={t} pad={16} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {editing ? (
                <>
                  <div><FLabel t={t}>FULL NAME</FLabel><TInput t={t} value={form.name} onChange={v => setF('name', v)} placeholder="Juan Dela Cruz" /></div>
                  <div><FLabel t={t}>EMAIL</FLabel><TInput t={t} type="email" inputMode="email" value={form.email} onChange={v => setF('email', v)} placeholder="you@email.com" /></div>
                  <div style={{ display: 'flex', gap: 11 }}>
                    <div style={{ width: 110 }}><FLabel t={t}>AGE</FLabel><TInput t={t} type="number" inputMode="numeric" value={form.age} onChange={v => setF('age', v)} placeholder="—" /></div>
                    <div style={{ flex: 1 }}><FLabel t={t}>STATUS</FLabel><ChipSelect t={t} options={['Studying', 'Working']} value={form.occupation === 'studying' ? 'Studying' : form.occupation === 'working' ? 'Working' : ''} onChange={v => setF('occupation', v.toLowerCase())} /></div>
                  </div>
                  {form.occupation === 'studying' && <div><FLabel t={t}>SCHOOL / UNIVERSITY</FLabel><TInput t={t} value={form.school} onChange={v => setF('school', v)} placeholder="e.g. University of the Philippines" /></div>}
                  {form.occupation === 'working' && <div><FLabel t={t}>INDUSTRY</FLabel><Sel t={t} value={form.industry} onChange={v => setF('industry', v)} options={INDUSTRIES} placeholder="Select your industry" /></div>}
                  <div><FLabel t={t}>ADDRESS</FLabel><TArea t={t} value={form.address} onChange={v => setF('address', v)} placeholder="House no., street, barangay, city, province" /></div>
                </>
              ) : (
                <>
                  {[
                    ['Name', u.name || '—'],
                    ['Email', u.email || 'Not provided'],
                    ['Age', u.age ? `${u.age} years old` : 'Not provided'],
                    ['Status', isStudent ? 'Studying' : u.occupation === 'working' ? 'Working' : 'Not provided'],
                    ...(isStudent ? [['School', u.school || 'Not provided']] : []),
                    ...(u.occupation === 'working' ? [['Industry', u.industry || 'Not provided']] : []),
                    ['Address', u.address || 'Not provided'],
                  ].map(([k, v], i, a) => (
                    <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 16, paddingBottom: i < a.length - 1 ? 14 : 0, borderBottom: i < a.length - 1 ? `1px solid ${t.border}` : 'none' }}>
                      <span style={{ fontSize: 13, color: t.subtext, fontWeight: 600, flexShrink: 0 }}>{k}</span>
                      <span style={{ fontSize: 13.5, color: t.text, fontWeight: 600, textAlign: 'right' }}>{v}</span>
                    </div>
                  ))}
                  {!u.email && !u.age && !u.address && <div style={{ fontSize: 12, color: t.subtext, fontStyle: 'italic' }}>Tap Edit to complete your profile.</div>}
                </>
              )}
            </Card>
          </div>

          {/* Badges */}
          <div>
            <SectionTitle t={t}>Badges Earned</SectionTitle>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
              {p.badges.map(b => (
                <Card key={b.id} t={t} pad={10} style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 26 }}>{b.icon}</div>
                  <div style={{ fontSize: 10, fontWeight: 700, color: t.text, marginTop: 4, lineHeight: 1.15 }}>{b.name}</div>
                </Card>
              ))}
            </div>
          </div>
        </>
      )}

      {/* Settings (all roles) */}
      <div>
        <SectionTitle t={t}>Settings</SectionTitle>
        <Card t={t} pad={6}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 10px' }}>
            <IconTile icon={<Icon name={dark ? 'moon' : 'sun'} size={20} color={t.text} />} color={t.mid} t={t} size={38} radius={11} />
            <div style={{ flex: 1, fontSize: 14, fontWeight: 600, color: t.text }}>Dark Mode</div>
            <button onClick={() => setDark(d => !d)} className="no-select" style={{ width: 50, height: 30, borderRadius: 999, border: 'none', background: dark ? t.mid : t.border, position: 'relative', transition: 'background 0.25s' }}>
              <span style={{ position: 'absolute', top: 3, left: dark ? 23 : 3, width: 24, height: 24, borderRadius: 999, background: '#fff', transition: 'left 0.25s', boxShadow: '0 1px 4px rgba(0,0,0,0.3)' }} />
            </button>
          </div>
          {(isAdmin ? [['settings', 'Admin Console', 'AdminConsole'], ['bell', 'Notifications', 'Alerts']] : [['bell', 'Notifications', 'Alerts'], ['shield', 'Privacy & Safety', '__privacy'], ['route', 'Saved Routes', 'Commute']]).map(([icon, label, target]) => (
            <button key={label} onClick={() => target === '__privacy' ? setPrivacyOpen(true) : (target && go(target))} className="no-select" style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '12px 10px', background: 'transparent', border: 'none', borderTop: `1px solid ${t.border}`, minHeight: 52 }}>
              <IconTile icon={<Icon name={icon} size={20} color={t.text} />} color={t.subtext} t={t} size={38} radius={11} />
              <span style={{ flex: 1, textAlign: 'left', fontSize: 14, fontWeight: 600, color: t.text }}>{label}</span>
              <Icon name="chevron-right" size={18} color={t.subtext} />
            </button>
          ))}
        </Card>
      </div>

      {privacyOpen && (
        <div onClick={() => setPrivacyOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 50, display: 'flex', alignItems: 'flex-end', animation: 'screenIn 0.2s ease' }}>
          <div onClick={e => e.stopPropagation()} style={{ width: '100%', background: t.bg, borderTopLeftRadius: 26, borderTopRightRadius: 26, padding: '10px 20px max(22px, env(safe-area-inset-bottom))', maxHeight: '82%', overflowY: 'auto' }}>
            <div style={{ width: 40, height: 4, borderRadius: 999, background: t.border, margin: '4px auto 16px' }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
              <Icon name="shield" size={22} color={t.mid} />
              <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: t.text }}>Privacy &amp; Safety</h2>
            </div>
            <p style={{ margin: '0 0 16px', fontSize: 12.5, color: t.subtext, lineHeight: 1.45 }}>Your data is handled under the Data Privacy Act of 2012 (RA 10173).</p>

            <Card t={t} pad={13} style={{ marginBottom: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 36, height: 36, borderRadius: 999, background: t.success + (dark ? '2e' : '1c'), display: 'grid', placeItems: 'center' }}><Icon name="check" size={18} color={t.success} strokeWidth={3} /></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: t.text }}>Consent granted</div>
                  <div style={{ fontSize: 11.5, color: t.subtext, marginTop: 1 }}>
                    {consent && consent.at ? `On ${new Date(consent.at).toLocaleDateString()}` : 'Active'} · Notice v{consent ? consent.version : '1.0'}
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: `1px solid ${t.border}`, marginTop: 11, paddingTop: 11 }}>
                <div style={{ fontSize: 12.5, color: t.text, fontWeight: 600 }}>Marketing updates</div>
                <span style={{ fontSize: 11.5, fontWeight: 700, color: consent && consent.marketing ? t.success : t.subtext }}>{consent && consent.marketing ? 'On' : 'Off'}</span>
              </div>
            </Card>

            {[
              { icon: '📄', label: 'View privacy notice', d: 'How we collect & process data' },
              { icon: '📥', label: 'Request my data', d: 'Get a copy of your information' },
              { icon: '✏️', label: 'Correct my data', d: 'Update inaccurate details' },
            ].map(r => (
              <button key={r.label} className="no-select" style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '12px 4px', background: 'transparent', border: 'none', borderBottom: `1px solid ${t.border}`, minHeight: 52 }}>
                <span style={{ fontSize: 19, width: 26, textAlign: 'center' }}>{r.icon}</span>
                <div style={{ flex: 1, textAlign: 'left' }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: t.text }}>{r.label}</div>
                  <div style={{ fontSize: 11, color: t.subtext }}>{r.d}</div>
                </div>
                <Icon name="chevron-right" size={17} color={t.subtext} />
              </button>
            ))}

            <div style={{ background: t.danger + (dark ? '17' : '0c'), border: `1px solid ${t.danger}33`, borderRadius: 14, padding: 13, marginTop: 16 }}>
              <div style={{ fontSize: 13, fontWeight: 800, color: t.text }}>Withdraw consent</div>
              <div style={{ fontSize: 12, color: t.subtext, marginTop: 3, lineHeight: 1.45 }}>This logs you out and stops further processing of your data. You\u2019ll be asked to consent again to use NRSA.</div>
              <Btn t={t} full color={t.danger} variant="soft" onClick={onWithdrawConsent} style={{ marginTop: 11, minHeight: 46, fontSize: 13.5 }}>Withdraw &amp; log out</Btn>
            </div>
            <div style={{ fontSize: 11, color: t.subtext, textAlign: 'center', marginTop: 14, lineHeight: 1.4 }}>Data Protection Officer · dpo@nrsa.org.ph</div>
          </div>
        </div>
      )}

      <Btn t={t} full variant="outline" onClick={onLogout} style={{ color: t.danger, borderColor: t.danger + '55' }} icon="x">Log out</Btn>
      <div style={{ textAlign: 'center', fontSize: 11.5, color: t.subtext, paddingTop: 4 }}>NRSA Community App · v1.0.0<br />National Road Safety Alliance</div>
    </div>
  );
}

// ===== CRASH RESPONDER REGISTRATION =====
function ResponderRegisterScreen({ t, go, user, updateUser }) {
  const u = user || {};
  const [f, setForm] = useState({ org: '', position: '', years: '', certs: [], cred: '', attest: false });
  const set = (k, v) => setForm(s => ({ ...s, [k]: v }));
  const [submitted, setSubmitted] = useState(getResp() && getResp().status === 'pending');
  const fileRef = useRef(null);

  const ready = f.org.trim() && f.position.trim() && f.attest && u.verified;

  const submit = () => {
    if (!ready) return;
    setResp({ status: 'pending', org: f.org.trim(), position: f.position.trim(), years: f.years, certs: f.certs, cred: f.cred, name: u.name, ts: Date.now() });
    updateUser({ responderStatus: 'pending' });
    if (NRSAApi.isLive()) {
      NRSAApi.applyResponder({
        organization: f.org.trim(), position: f.position.trim(),
        yearsExp: parseInt(f.years, 10) || 0, certifications: f.certs,
      }).catch(() => {});
    }
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flex: 1, gap: 16, textAlign: 'center' }}>
        <div style={{ width: 92, height: 92, borderRadius: 999, background: t.warn + (t.dark ? '2e' : '1c'), display: 'grid', placeItems: 'center', position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, borderRadius: 999, border: `2px solid ${t.warn}66`, animation: 'pulse-ring 2s infinite' }} />
          <span style={{ fontSize: 42 }}>⏳</span>
        </div>
        <div>
          <h2 style={{ margin: 0, fontSize: 21, fontWeight: 800, color: t.text }}>Application submitted</h2>
          <p style={{ margin: '8px 0 0', fontSize: 13.5, color: t.subtext, lineHeight: 1.5, maxWidth: 300 }}>Your Crash Responder application is now <b style={{ color: t.text }}>pending NRSA verification</b>. An administrator will review your qualifications and ID. You'll be notified once approved.</p>
        </div>
        <Btn t={t} color={t.mid} onClick={() => go('Profile')} style={{ marginTop: 4, minWidth: 200 }}>Back to profile</Btn>
      </div>
    );
  }

  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      {/* what it does */}
      <Card t={t} pad={0} style={{ overflow: 'hidden' }}>
        <div style={{ background: `linear-gradient(135deg, ${t.accent}, #d8531a)`, padding: 18, color: '#fff' }}>
          <div style={{ fontSize: 30 }}>🚨</div>
          <div style={{ fontSize: 18, fontWeight: 800, marginTop: 6 }}>Crash Responder Program</div>
          <div style={{ fontSize: 12.5, opacity: 0.92, marginTop: 4, lineHeight: 1.45 }}>Accredited responders file GPS-tagged crash records directly into the National Road Crash Database under the DOTr–DOH–DILG schema.</div>
        </div>
      </Card>

      {/* verification gate */}
      {!u.verified && (
        <Card t={t} pad={14} style={{ background: t.danger + (t.dark ? '1a' : '0f'), border: `1px solid ${t.danger}44` }}>
          <div style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
            <Icon name="alert" size={22} color={t.danger} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 800, color: t.text }}>Identity verification required</div>
              <div style={{ fontSize: 12.5, color: t.subtext, marginTop: 3, lineHeight: 1.45 }}>You must verify your account with a valid government ID before applying.</div>
              <Btn t={t} color={t.danger} onClick={() => go('Profile')} style={{ marginTop: 10, minHeight: 40, fontSize: 13 }}>Verify identity →</Btn>
            </div>
          </div>
        </Card>
      )}

      <Card t={t} pad={16} style={{ display: 'flex', flexDirection: 'column', gap: 16, opacity: u.verified ? 1 : 0.55, pointerEvents: u.verified ? 'auto' : 'none' }}>
        <div style={{ fontSize: 14.5, fontWeight: 800, color: t.text }}>Qualifications</div>
        <div><FLabel t={t}>ORGANIZATION / AGENCY</FLabel><TInput t={t} value={f.org} onChange={v => set('org', v)} placeholder="e.g. MMDA, LGU rescue, Red Cross, NGO" /></div>
        <div><FLabel t={t}>POSITION / UNIT</FLabel><TInput t={t} value={f.position} onChange={v => set('position', v)} placeholder="e.g. EMT, Traffic Aide, Volunteer responder" /></div>
        <div><FLabel t={t}>YEARS OF EXPERIENCE</FLabel><TInput t={t} type="number" inputMode="numeric" value={f.years} onChange={v => set('years', v)} placeholder="0" /></div>
        <div><FLabel t={t} hint="(select all that apply)">CERTIFICATIONS / TRAINING</FLabel><ChipSelect t={t} multi options={CERTS} value={f.certs} onChange={v => set('certs', v)} /></div>
        <div>
          <FLabel t={t}>CREDENTIAL / ACCREDITATION</FLabel>
          <input ref={fileRef} type="file" accept="image/*,.pdf" onChange={e => set('cred', (e.target.files && e.target.files[0] && e.target.files[0].name) || '')} style={{ display: 'none' }} />
          <Btn t={t} full variant="outline" onClick={() => fileRef.current && fileRef.current.click()} icon="plus">{f.cred ? `✓ ${f.cred}` : 'Upload certificate / accreditation'}</Btn>
        </div>
        <button onClick={() => set('attest', !f.attest)} className="no-select" style={{ display: 'flex', gap: 11, alignItems: 'flex-start', background: 'transparent', border: 'none', padding: 0, textAlign: 'left' }}>
          <span style={{ width: 24, height: 24, minWidth: 24, borderRadius: 7, border: `2px solid ${f.attest ? t.success : t.border}`, background: f.attest ? t.success : 'transparent', display: 'grid', placeItems: 'center', marginTop: 1 }}>{f.attest && <Icon name="check" size={15} color="#fff" strokeWidth={3} />}</span>
          <span style={{ fontSize: 12.5, color: t.text, fontWeight: 500, lineHeight: 1.45 }}>I certify that the information provided is accurate and consent to NRSA verifying my credentials and identity.</span>
        </button>
      </Card>

      <Btn t={t} full color={ready ? t.accent : t.muted} onClick={submit} style={{ opacity: ready ? 1 : 0.55, minHeight: 52 }}>Submit application</Btn>
      <div style={{ textAlign: 'center', fontSize: 11, color: t.subtext }}>Applications are reviewed by NRSA administrators within 3–5 working days.</div>
    </div>
  );
}

// ===== ADMIN CONSOLE =====
function AdminConsoleScreen({ t, go, user }) {
  const localApp = getResp();
  const baseQueue = [
    { id: 'a1', name: 'Marco Dizon', org: 'MMDA · Road Emergency Unit', role: 'Traffic Aide II', id: 'Driver\u2019s License', mock: true },
    { id: 'a2', name: 'Liza Ramos', org: 'Philippine Red Cross', role: 'Volunteer EMT', id: 'PhilSys National ID', mock: true },
  ];
  const [queue, setQueue] = useState(() => {
    const list = [...baseQueue];
    if (localApp && localApp.status === 'pending') list.unshift({ id: 'local', name: localApp.name || 'Your application', org: localApp.org, role: localApp.position, id: 'Verified ID', local: true });
    return list;
  });
  const [done, setDone] = useState({}); // id -> 'approved'|'rejected'

  const act = (item, decision) => {
    setDone(d => ({ ...d, [item.id]: decision }));
    if (item.local && localApp) setResp({ ...localApp, status: decision === 'approve' ? 'approved' : 'rejected' });
  };

  const pendingCount = queue.filter(q => !done[q.id]).length;
  const stats = [
    { label: 'Pending', value: pendingCount, color: t.warn },
    { label: 'Agencies syncing', value: '5/8', color: t.success },
    { label: 'Records today', value: '187', color: t.mid },
  ];

  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Card t={t} style={{ background: `linear-gradient(135deg, ${t.navy}, #6a4b12)`, border: 'none', color: '#fff' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
          <span style={{ fontSize: 26 }}>🛡️</span>
          <div>
            <div style={{ fontSize: 15.5, fontWeight: 800 }}>NRSA Administration</div>
            <div style={{ fontSize: 12, opacity: 0.85 }}>National Road Crash App & Database</div>
          </div>
        </div>
        <div style={{ display: 'flex', marginTop: 16, background: 'rgba(255,255,255,0.12)', borderRadius: 14, overflow: 'hidden' }}>
          {stats.map((s, i) => (
            <div key={s.label} style={{ flex: 1, padding: '11px 4px', textAlign: 'center', borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.18)' : 'none' }}>
              <div style={{ fontSize: 20, fontWeight: 800 }}>{s.value}</div>
              <div style={{ fontSize: 9.5, opacity: 0.82, fontWeight: 600 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </Card>

      <SectionTitle t={t} action={<Badge t={t} color={t.warn}>{pendingCount} pending</Badge>}>Responder Verification Queue</SectionTitle>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {queue.map(item => {
          const decision = done[item.id];
          return (
            <Card key={item.id} t={t} pad={14} style={{ opacity: decision ? 0.7 : 1, border: item.local ? `1.5px solid ${t.mid}` : `1px solid ${t.border}` }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <IconTile icon="🧑‍🚒" color={t.accent} t={t} size={44} fontSize={22} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap' }}>
                    <span style={{ fontSize: 14.5, fontWeight: 700, color: t.text }}>{item.name}</span>
                    {item.local && <Badge t={t} color={t.mid}>This device</Badge>}
                  </div>
                  <div style={{ fontSize: 12, color: t.subtext, marginTop: 2 }}>{item.role || '—'} · {item.org || '—'}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: t.subtext, marginTop: 5, fontWeight: 600 }}><Icon name="shield" size={13} color={t.success} />{item.id}</div>
                </div>
              </div>
              {decision ? (
                <div style={{ marginTop: 12, textAlign: 'center', fontSize: 13, fontWeight: 800, color: decision === 'approve' ? t.success : t.danger }}>
                  {decision === 'approve' ? '✓ Approved & accredited' : '✕ Application rejected'}
                </div>
              ) : (
                <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
                  <Btn t={t} full variant="outline" onClick={() => act(item, 'reject')} style={{ minHeight: 42, fontSize: 13, color: t.danger, borderColor: t.danger + '55' }}>Reject</Btn>
                  <Btn t={t} full color={t.success} onClick={() => act(item, 'approve')} style={{ minHeight: 42, fontSize: 13 }} icon="check">Approve</Btn>
                </div>
              )}
            </Card>
          );
        })}
      </div>

      <SectionTitle t={t}>System</SectionTitle>
      <Card t={t} pad={6}>
        {[['📊', 'National Crash Records', '2,481 entries'], ['🗺️', 'Blackspot GIS Layer', '34 hotspots'], ['🔄', 'Agency Sync Status', '5 of 8 live'], ['📑', 'Policy Briefs', 'PRSAP 2023–2028']].map(([ic, label, meta], i) => (
          <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 10px', borderTop: i > 0 ? `1px solid ${t.border}` : 'none' }}>
            <IconTile icon={ic} color={t.mid} t={t} size={38} radius={11} fontSize={18} />
            <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: t.text }}>{label}</span>
            <span style={{ fontSize: 11.5, color: t.subtext, fontWeight: 600 }}>{meta}</span>
          </div>
        ))}
      </Card>
    </div>
  );
}

Object.assign(window, { ProfileScreen, ResponderRegisterScreen, AdminConsoleScreen });