/* Admin → Settings */
function SettingsScreen() {
  const [tab, setTab] = React.useState('school');
  const tabs = [['school','School Profile'],['notifications','Notifications'],['roles','Roles & Access'],['billing','Billing']];
  const Toggle = ({ on }) => (
    <span style={{ width:42, height:24, borderRadius:'999px', background: on?'var(--success-500)':'var(--gray-300)', position:'relative', flex:'0 0 auto', transition:'.15s' }}>
      <span style={{ position:'absolute', top:2, left: on?20:2, width:20, height:20, borderRadius:'999px', background:'#fff', boxShadow:'var(--shadow-xs)', transition:'.15s' }} />
    </span>
  );
  const Field = ({ label, value }) => (
    <div style={{ marginBottom:14 }}>
      <div style={{ fontSize:12, fontWeight:700, color:'var(--gray-500)', marginBottom:6 }}>{label}</div>
      <input defaultValue={value} style={{ width:'100%', border:'1px solid var(--gray-200)', borderRadius:10, padding:'11px 13px', fontSize:14, fontFamily:'var(--font-sans)', color:'var(--ink)', outline:'none', boxSizing:'border-box' }} />
    </div>
  );
  const Line = ({ icon, tint, ic, title, sub, on, last }) => (
    <div style={{ display:'flex', alignItems:'center', gap:13, padding:'14px 0', borderBottom: last?'0':'1px solid var(--gray-100)' }}>
      <span style={{ width:36, height:36, borderRadius:9, background:tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={icon} size={17} color={ic} /></span>
      <div style={{ flex:1 }}>
        <div style={{ fontSize:14, fontWeight:700, color:'var(--ink)' }}>{title}</div>
        <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{sub}</div>
      </div>
      <Toggle on={on} />
    </div>
  );
  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      {/* tabs */}
      <div style={{ display:'flex', gap:8, marginBottom:18 }}>
        {tabs.map(([id,lab])=>(
          <button key={id} onClick={()=>setTab(id)} style={{
            padding:'9px 16px', borderRadius:'999px', border:0, cursor:'pointer', fontWeight:700, fontSize:13.5, fontFamily:'var(--font-sans)',
            background: tab===id ? 'var(--navy-600)' : '#fff', color: tab===id ? '#fff' : 'var(--gray-600)',
            boxShadow: tab===id ? 'none' : 'inset 0 0 0 1px var(--gray-200)',
          }}>{lab}</button>
        ))}
      </div>

      <div style={{ maxWidth: tab==='roles' ? 1080 : 680 }}>
        {tab==='school' && (
          <Panel title="School Profile">
            <div style={{ display:'flex', alignItems:'center', gap:16, padding:'8px 0 18px', borderBottom:'1px solid var(--gray-100)', marginBottom:16 }}>
              <div style={{ background:'var(--navy-900)', borderRadius:12, padding:'10px 12px', display:'flex' }}><img src={window.JL_LOGO_TRANS || 'assets/logo-onnavy-trans.png'} alt="logo" style={{ height:34 }} /></div>
              <button onClick={()=>jlToast('Upload a new logo', { icon:'image' })} style={{ background:'#fff', border:'1px solid var(--gray-200)', borderRadius:9, padding:'9px 14px', fontWeight:700, fontSize:13, cursor:'pointer', fontFamily:'var(--font-sans)', color:'var(--gray-700)' }}>Change Logo</button>
            </div>
            <Field label="School Name" value="Katy Middle School" />
            <Field label="District" value="Katy Independent School District" />
            <div style={{ display:'flex', gap:14 }}>
              <div style={{ flex:1 }}><Field label="Dismissal Time" value="3:30 PM" /></div>
              <div style={{ flex:1 }}><Field label="Time Zone" value="Central (CT)" /></div>
            </div>
            <button onClick={()=>jlToast('School profile saved', { icon:'check' })} style={{ background:'var(--gold-400)', color:'var(--on-gold)', border:0, borderRadius:10, padding:'11px 20px', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:'var(--font-sans)', boxShadow:'var(--shadow-gold)', marginTop:4 }}>Save Changes</button>
          </Panel>
        )}
        {tab==='notifications' && (
          <Panel title="Notifications">
            <Line icon="bus" tint="var(--blue-100)" ic="var(--blue-500)" title="Bus delay alerts" sub="Notify parents on route delays" on={true} />
            <Line icon="car-front" tint="var(--gold-100)" ic="var(--gold-600)" title="Pickup confirmations" sub="Send when a student is released" on={true} />
            <Line icon="banknote" tint="var(--success-100)" ic="var(--success-600)" title="Payment reminders" sub="3 days before due date" on={false} />
            <Line icon="megaphone" tint="var(--danger-100)" ic="var(--danger-500)" title="Emergency broadcasts" sub="Always on for all families" on={true} last={true} />
          </Panel>
        )}
        {tab==='roles' && <RolesAccess />}
        {tab==='billing' && (
          <Panel title="Billing">
            <Field label="Plan" value="District — 1,500 students" />
            <Field label="Billing Contact" value="finance@katyisd.org" />
            <Field label="Payment Method" value="Visa ending ••42" />
            <button onClick={()=>jlToast('Opening subscription portal…', { icon:'credit-card' })} style={{ background:'#fff', color:'var(--navy-600)', border:'1px solid var(--gray-300)', borderRadius:10, padding:'11px 20px', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:'var(--font-sans)', marginTop:4 }}>Manage Subscription</button>
          </Panel>
        )}
      </div>
    </div>
  );
}
Object.assign(window, { SettingsScreen });