// Settings — user permissions matrix
function SettingsView(){
  const [tab, setTab] = useState('users');
  const [users, setUsers] = useState(USERS);
  const [permissions, setPermissions] = useState({
    Admin:   { dashboard:true, cashflow:true, decision:true, general:true, selling:true,  analytics:true, settings:true,  export:true, delete:true  },
    Manager: { dashboard:true, cashflow:true, decision:true, general:true, selling:true,  analytics:true, settings:false, export:true, delete:false },
    Editor:  { dashboard:true, cashflow:true, decision:false,general:true, selling:true,  analytics:true, settings:false, export:true, delete:false },
    Auditor: { dashboard:true, cashflow:true, decision:false,general:false,selling:false, analytics:true, settings:false, export:true, delete:false },
    Viewer:  { dashboard:true, cashflow:true, decision:false,general:false,selling:false, analytics:true, settings:false, export:false,delete:false },
  });
  const [prefs, setPrefs] = useState({
    darkMode:false, autoSave:true, twoFA:true, emailNotif:true, loginAlerts:true, soundFx:false,
    landing:'Dashboard', currency:'THB', timeout:'30 min', threshold:50000,
  });
  const [sessions, setSessions] = useState([
    {id:1, dev:'MacBook Pro · Chrome',  loc:'Bangkok, TH · 192.168.1.34', cur:true,  time:'Now'},
    {id:2, dev:'iPhone 15 · Safari',    loc:'Bangkok, TH · 49.231.50.10', cur:false, time:'2 hr ago'},
    {id:3, dev:'iPad · FINX App',       loc:'Nonthaburi, TH · 1.20.x.x',  cur:false, time:'Yesterday'},
  ]);
  const [search, setSearch] = useState('');
  const [savedSnapshot, setSavedSnapshot] = useState(null);

  // Load users + permissions from D1 on mount
  useEffect(() => {
    window.finxDB.getUsers().then(u => { if (u && u.length) setUsers(u); }).catch(() => {});
    window.finxDB.getPermissions().then(p => { if (p) setPermissions(p); }).catch(() => {});
  }, []);

  const toggle = (role, k) => setPermissions(p => ({...p, [role]: {...p[role], [k]: !p[role][k]}}));
  const togglePref = (k) => setPrefs(p=>({...p,[k]:!p[k]}));
  const setPref = (k,v) => setPrefs(p=>({...p,[k]:v}));
  const cycleStatus = (id) => setUsers(us => us.map(u => u.id===id
    ? {...u, status: u.status==='active'?'inactive':u.status==='inactive'?'pending':'active'}
    : u));

  const filteredUsers = users.filter(u =>
    !search ||
    u.name.toLowerCase().includes(search.toLowerCase()) ||
    u.email.toLowerCase().includes(search.toLowerCase()) ||
    u.dept.toLowerCase().includes(search.toLowerCase())
  );

  const onSave = () => {
    setSavedSnapshot({users, permissions, prefs});
    // Persist to Cloudflare D1
    window.finxDB.savePermissions(permissions).catch(() => {});
    window.finxDB.saveSetting('prefs', prefs).catch(() => {});
    users.forEach(u => window.finxDB.saveUser(u).catch(() => {}));
    window.toast('All settings saved', {tone:'success', title:'Saved'});
  };
  const onDiscard = () => {
    window.confirmDialog({
      title:'Discard changes?',
      message:'Unsaved settings will revert to the last saved snapshot.',
      tone:'danger', okLabel:'Discard',
      onOk: ()=>{
        if (savedSnapshot){ setUsers(savedSnapshot.users); setPermissions(savedSnapshot.permissions); setPrefs(savedSnapshot.prefs); }
        else { setUsers(USERS); }
        window.toast('Changes discarded');
      }
    });
  };
  const onInvite = () => {
    window.openModal({
      title:'Invite team member',
      size:'md',
      message: <InviteForm onSubmit={(u)=>{
        const colors = ['#1f2a8e','#10b981','#f59e0b','#6366f1','#ec4899','#0ea5e9','#dc2626'];
        const id = Math.max(...users.map(x=>x.id))+1;
        setUsers(us => [...us, {id, name:u.name, email:u.email, role:u.role, dept:u.dept, status:'pending', last:'—', color:colors[id%colors.length]}]);
        window.toast(`Invitation sent to ${u.email}`, {tone:'success', title:'Invited'});
      }}/>
    });
  };
  const onEditUser = (user) => {
    window.openModal({
      title:'Edit user · '+user.name,
      size:'md',
      message: <EditUserForm user={user} onSubmit={(updated)=>{
        setUsers(us => us.map(u => u.id===user.id ? {...u, ...updated} : u));
        window.toast('User updated', {tone:'success'});
      }}/>
    });
  };
  const onDeleteUser = (user) => {
    window.confirmDialog({
      title:`Remove ${user.name}?`,
      message:`${user.email} will lose access immediately.`,
      tone:'danger', okLabel:'Remove user',
      onOk: ()=>{
        setUsers(us => us.filter(u => u.id !== user.id));
        window.finxDB.deleteUser(user.email).catch(() => {});
        window.toast(`${user.name} removed`, {tone:'danger'});
      }
    });
  };
  const onChangePassword = () => {
    window.openModal({
      title:'Change password',
      size:'md',
      message: <ChangePasswordForm/>
    });
  };
  const onSignOutSession = (s) => {
    window.confirmDialog({
      title:'Sign out this session?',
      message:s.dev+' will be signed out immediately.',
      tone:'danger', okLabel:'Sign out',
      onOk: ()=>{ setSessions(ss => ss.filter(x => x.id !== s.id)); window.toast('Session ended'); }
    });
  };

  const PERMS = [
    { key:'dashboard', label:'View Dashboard' },
    { key:'cashflow',  label:'Manage Cash Flow' },
    { key:'decision',  label:'Make Decision' },
    { key:'general',   label:'Edit General Info' },
    { key:'selling',   label:'Selling Expenses' },
    { key:'analytics', label:'View Analytics' },
    { key:'settings',  label:'Access Settings' },
    { key:'export',    label:'Export Reports' },
    { key:'delete',    label:'Delete Records' },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Settings</div>
          <div className="page-sub">User permissions, security & system preferences</div>
        </div>
        <div className="row" style={{gap:8}}>
          <button className="btn" onClick={onDiscard}><I.Reset size={14}/> Discard</button>
          <button className="btn primary" onClick={onSave}><I.Save size={14}/> Save changes</button>
        </div>
      </div>

      <div className="tabs">
        {[
          ['users','Users','Users'],
          ['perms','Permissions','Shield'],
          ['prefs','Preferences','Cog'],
          ['security','Security','Lock'],
          ['db','Database','Database'],
        ].map(([k,label,ic])=>{
          const Icon = I[ic];
          return (
            <div key={k} className={"tab row"+(tab===k?' on':'')} onClick={()=>setTab(k)} style={{gap:8}}>
              <Icon size={14}/> {label}
            </div>
          );
        })}
      </div>

      {tab==='users' && (
        <div className="card elev">
          <div className="card-head">
            <div className="row" style={{gap:10}}>
              <div className="card-title">Team Members</div>
              <span className="chip">{filteredUsers.length} total</span>
              <span className="chip green">{users.filter(u=>u.status==='active').length} active</span>
            </div>
            <div className="row" style={{gap:8}}>
              <div className="search" style={{width:240,padding:'6px 12px'}}>
                <I.Search size={14} stroke="#9aa3c2"/>
                <input placeholder="Search users…" value={search} onChange={e=>setSearch(e.target.value)}/>
              </div>
              <button className="btn primary" onClick={onInvite}><I.Plus size={14}/> Invite user</button>
            </div>
          </div>
          <div className="tbl-wrap">
            <table className="t">
              <thead>
                <tr>
                  <th>User</th>
                  <th>Department</th>
                  <th>Role</th>
                  <th>Status</th>
                  <th>Last active</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {filteredUsers.map((u,i)=>(
                  <tr key={u.id} style={{animation:`fadein .25s ${i*30}ms both`}}>
                    <td>
                      <div className="row" style={{gap:10}}>
                        <div className="act-av" style={{background:u.color,width:34,height:34}}>{u.name[0]}</div>
                        <div>
                          <div style={{fontWeight:700,fontSize:13}} className="thai">{u.name}</div>
                          <div style={{fontSize:11.5,color:'var(--muted)'}}>{u.email}</div>
                        </div>
                      </div>
                    </td>
                    <td className="thai">{u.dept}</td>
                    <td>
                      <span className="chip" style={{
                        background: u.role==='Admin'?'#eef0ff':u.role==='Manager'?'#e0f2fe':u.role==='Editor'?'#ecfdf5':u.role==='Auditor'?'#fef3c7':'#f1f5f9',
                        color:     u.role==='Admin'?'#3730a3':u.role==='Manager'?'#075985':u.role==='Editor'?'#065f46':u.role==='Auditor'?'#92400e':'#475569',
                        borderColor:'transparent'
                      }}><I.Shield size={11}/> {u.role}</span>
                    </td>
                    <td>
                      <span className={"chip "+(u.status==='active'?'green':u.status==='pending'?'amber':'red')}
                            onClick={()=>cycleStatus(u.id)} style={{cursor:'pointer',textTransform:'capitalize'}}>
                        <span style={{width:6,height:6,borderRadius:50,background:'currentColor',display:'inline-block'}}/>
                        {u.status}
                      </span>
                    </td>
                    <td className="muted" style={{fontSize:12}}>{u.last}</td>
                    <td>
                      <div className="row" style={{gap:6}}>
                        <button className="icon-btn" style={{width:30,height:30}} onClick={()=>onEditUser(u)}><I.Edit size={13}/></button>
                        <button className="icon-btn" style={{width:30,height:30,color:'#dc2626'}} onClick={()=>onDeleteUser(u)}><I.Trash size={13}/></button>
                      </div>
                    </td>
                  </tr>
                ))}
                {filteredUsers.length===0 && (
                  <tr><td colSpan="6" style={{textAlign:'center',padding:32,color:'var(--muted)'}}>No users match "{search}"</td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab==='perms' && (
        <div className="card elev">
          <div className="card-head">
            <div className="card-title">Role-based Permission Matrix</div>
            <span className="chip"><I.Shield size={11}/> Click any cell to toggle</span>
          </div>
          <div style={{padding:'0 8px 14px'}}>
            <table className="matrix">
              <thead>
                <tr>
                  <th>Permission</th>
                  {Object.keys(permissions).map(r=> <th key={r}>{r}</th>)}
                </tr>
              </thead>
              <tbody>
                {PERMS.map((p,i)=>(
                  <tr key={p.key} style={{animation:`fadein .25s ${i*40}ms both`}}>
                    <td style={{fontWeight:600}}>{p.label}</td>
                    {Object.keys(permissions).map(r=>{
                      const on = permissions[r][p.key];
                      return (
                        <td key={r}>
                          <span className={"check"+(on?' on':'')}
                                onClick={()=>{ toggle(r,p.key); }}>
                            {on && <I.Check size={12}/>}
                          </span>
                        </td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab==='prefs' && (
        <div className="grid-2">
          <div className="card">
            <div className="card-head">
              <div className="card-title">Application</div>
            </div>
            <div className="card-body">
              <PrefRow label="Dark mode" sub="Reduces glare in low-light environments"
                       on={prefs.darkMode} onToggle={()=>{ togglePref('darkMode'); window.toast(prefs.darkMode?'Light mode':'Dark mode (preview)'); }} icon="Moon"/>
              <PrefRow label="Auto-save drafts" sub="Save form changes every 30 seconds"
                       on={prefs.autoSave} onToggle={()=>togglePref('autoSave')} icon="Save"/>
              <PrefRow label="UI sound effects" sub="Subtle clicks and confirmations"
                       on={prefs.soundFx} onToggle={()=>togglePref('soundFx')} icon="Spark"/>
              <div style={{margin:'14px 0'}}>
                <label style={{fontSize:12,fontWeight:600,color:'var(--ink-2)',marginBottom:8,display:'block'}}>
                  Default landing page
                </label>
                <select className="select" value={prefs.landing} onChange={e=>setPref('landing',e.target.value)}>
                  <option>Dashboard</option>
                  <option>Daily Cash Flow</option>
                  <option>Analytics</option>
                </select>
              </div>
              <div>
                <label style={{fontSize:12,fontWeight:600,color:'var(--ink-2)',marginBottom:8,display:'block'}}>
                  Currency display
                </label>
                <div className="seg" style={{width:'100%'}}>
                  {['THB','USD','EUR'].map(c=> <button key={c} className={c===prefs.currency?'on':''} onClick={()=>setPref('currency',c)}>{c}</button>)}
                </div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <div className="card-title">Notifications</div>
            </div>
            <div className="card-body">
              <PrefRow label="Email notifications" sub="Daily summary + critical alerts"
                       on={prefs.emailNotif} onToggle={()=>togglePref('emailNotif')} icon="Mail"/>
              <PrefRow label="Login alerts" sub="New sign-ins to your account"
                       on={prefs.loginAlerts} onToggle={()=>togglePref('loginAlerts')} icon="Bell"/>
              <div style={{
                background:'linear-gradient(135deg,#eef0ff,#f0fbfa)',border:'1px solid #dde5f7',
                borderRadius:12,padding:14,marginTop:14
              }}>
                <div className="row" style={{gap:10,alignItems:'flex-start'}}>
                  <div style={{width:36,height:36,borderRadius:10,background:'#1f2a8e',display:'grid',placeItems:'center',color:'#fff'}}>
                    <I.Pin size={16}/>
                  </div>
                  <div style={{flex:1}}>
                    <div style={{fontWeight:700,fontSize:13}}>Threshold alerts</div>
                    <div style={{fontSize:12,color:'var(--muted)',marginTop:2}}>Get notified when cash balance drops below this amount.</div>
                    <div className="row" style={{gap:8,marginTop:10}}>
                      <input className="input mono" type="number" value={prefs.threshold}
                             onChange={e=>setPref('threshold',parseFloat(e.target.value)||0)}
                             style={{height:34,width:140}}/>
                      <span className="suffix">THB</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab==='security' && (
        <div className="grid-2">
          <div className="card">
            <div className="card-head">
              <div className="card-title">Authentication</div>
              <span className="chip green"><I.Check size={11}/> Verified</span>
            </div>
            <div className="card-body">
              <PrefRow label="Two-factor authentication" sub="Authenticator app · enabled 12 days ago"
                       on={prefs.twoFA} onToggle={()=>{
                         if (prefs.twoFA){
                           window.confirmDialog({
                             title:'Disable 2FA?',
                             message:'Your account will be less secure. Are you sure?',
                             tone:'danger', okLabel:'Disable',
                             onOk: ()=>{ togglePref('twoFA'); window.toast('2FA disabled', {tone:'warn'}); }
                           });
                         } else { togglePref('twoFA'); window.toast('2FA enabled', {tone:'success'}); }
                       }} icon="Shield"/>
              <div style={{margin:'14px 0'}}>
                <label style={{fontSize:12,fontWeight:600,color:'var(--ink-2)',marginBottom:8,display:'block'}}>
                  Session timeout
                </label>
                <div className="seg" style={{width:'100%'}}>
                  {['15 min','30 min','1 hr','4 hr'].map(c=> <button key={c} className={c===prefs.timeout?'on':''} onClick={()=>setPref('timeout',c)}>{c}</button>)}
                </div>
              </div>
              <button className="btn" style={{width:'100%',justifyContent:'center'}} onClick={onChangePassword}><I.Lock size={14}/> Change password</button>
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <div className="card-title">Active sessions</div>
              <span className="chip">{sessions.length} devices</span>
            </div>
            <div className="card-body">
              {sessions.map((s,i)=>(
                <div key={s.id} className="row between" style={{padding:'10px 0',borderBottom:i<sessions.length-1?'1px solid var(--line)':0}}>
                  <div>
                    <div style={{fontWeight:700,fontSize:13}}>{s.dev} {s.cur && <span className="chip green" style={{marginLeft:6}}>Current</span>}</div>
                    <div style={{fontSize:12,color:'var(--muted)',marginTop:2}}>{s.loc}</div>
                    <div style={{fontSize:11.5,color:'var(--muted)',marginTop:2}}>{s.time}</div>
                  </div>
                  {!s.cur && <button className="btn sm" onClick={()=>onSignOutSession(s)}>Sign out</button>}
                </div>
              ))}
              {sessions.length<=1 && (
                <div style={{padding:18,textAlign:'center',color:'var(--muted)',fontSize:13}}>No other sessions</div>
              )}
            </div>
          </div>
        </div>
      )}

      {tab==='db' && (
        <DbStatusPanel/>
      )}
    </div>
  );
}

function DbStatusPanel(){
  const [status, setStatus] = useState(null); // null | 'ok' | 'error'
  const [msg, setMsg]       = useState('');
  const [testing, setTesting] = useState(false);

  const testConn = async () => {
    setTesting(true); setStatus(null);
    try {
      const r = await fetch('/api/users');
      if (r.ok){ setStatus('ok'); setMsg('Connected · Cloudflare D1 is responding'); }
      else { setStatus('error'); setMsg('HTTP ' + r.status + ' — check wrangler.toml binding'); }
    } catch(e) {
      setStatus('error');
      setMsg(e.message.includes('fetch') ? 'Running locally? Start with: wrangler pages dev .' : e.message);
    }
    setTesting(false);
  };

  return (
    <div className="stack" style={{maxWidth:640}}>
      <div className="card elev">
        <div className="card-head">
          <div className="card-title" style={{display:'flex',alignItems:'center',gap:8}}>
            <I.Database size={16}/> Cloudflare D1 Database
          </div>
          {status==='ok'  && <span className="chip green">Connected</span>}
          {status==='error' && <span className="chip red">Error</span>}
        </div>
        <div className="card-body" style={{display:'grid',gap:14}}>
          <div style={{background:'#f7f8fc',border:'1px solid var(--line)',borderRadius:10,padding:'12px 14px',fontSize:13,lineHeight:1.6}}>
            <div style={{fontWeight:700,marginBottom:6,color:'var(--ink)'}}>Connection status</div>
            {status === null && <div style={{color:'var(--muted)'}}>กด Test Connection เพื่อตรวจสอบ</div>}
            {status === 'ok'    && <div style={{color:'#15803d'}}>{msg}</div>}
            {status === 'error' && <div style={{color:'#b91c1c'}}>{msg}</div>}
          </div>

          <div style={{background:'#f0fbfa',border:'1px solid #b2e8e4',borderRadius:10,padding:'12px 14px',fontSize:12.5,lineHeight:1.7}}>
            <div style={{fontWeight:700,marginBottom:4,color:'#0d9488'}}>วิธี Deploy + เชื่อม D1</div>
            <ol style={{margin:0,paddingLeft:18,color:'var(--ink-2)'}}>
              <li>ติดตั้ง: <code style={{background:'#e0f7f5',padding:'1px 5px',borderRadius:4}}>npm install -g wrangler</code></li>
              <li>Login: <code style={{background:'#e0f7f5',padding:'1px 5px',borderRadius:4}}>wrangler login</code></li>
              <li>สร้าง D1: <code style={{background:'#e0f7f5',padding:'1px 5px',borderRadius:4}}>wrangler d1 create smart-finx-db</code></li>
              <li>วาง database_id ใน <code style={{background:'#e0f7f5',padding:'1px 5px',borderRadius:4}}>wrangler.toml</code></li>
              <li>รัน schema: <code style={{background:'#e0f7f5',padding:'1px 5px',borderRadius:4}}>wrangler d1 execute smart-finx-db --file=d1/schema.sql</code></li>
              <li>Deploy: <code style={{background:'#e0f7f5',padding:'1px 5px',borderRadius:4}}>wrangler pages deploy .</code></li>
            </ol>
          </div>

          <button className="btn teal" style={{justifyContent:'center'}} disabled={testing} onClick={testConn}>
            {testing ? <><span style={{animation:'spin 1s linear infinite',display:'inline-block'}}>↻</span> Testing…</> : <><I.CheckCircle size={14}/> Test Connection</>}
          </button>
        </div>
      </div>
    </div>
  );
}

function InviteForm({ onSubmit }){
  const [f, setF] = useState({ name:'', email:'', role:'Viewer', dept:'การเงินและการบัญชี' });
  const valid = f.name.trim() && /\S+@\S+\.\S+/.test(f.email);
  return (
    <div style={{display:'grid',gap:10}}>
      <div className="field">
        <label>Full name <span className="req">*</span></label>
        <input className="input" value={f.name} onChange={e=>setF({...f,name:e.target.value})} placeholder="e.g. Somchai Prasert"/>
      </div>
      <div className="field">
        <label>Email <span className="req">*</span></label>
        <input className="input" type="email" value={f.email} onChange={e=>setF({...f,email:e.target.value})} placeholder="name@finx.co"/>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
        <div className="field">
          <label>Role</label>
          <select className="select" value={f.role} onChange={e=>setF({...f,role:e.target.value})}>
            <option>Admin</option><option>Manager</option><option>Editor</option><option>Auditor</option><option>Viewer</option>
          </select>
        </div>
        <div className="field">
          <label>Department</label>
          <select className="select thai" value={f.dept} onChange={e=>setF({...f,dept:e.target.value})}>
            <option>การเงินและการบัญชี</option><option>ฝ่ายขาย</option><option>ฝ่ายปฏิบัติการ</option><option>HR</option><option>IT & Systems</option>
          </select>
        </div>
      </div>
      <button className="btn primary" style={{justifyContent:'center',marginTop:6}}
              disabled={!valid}
              onClick={()=>{ onSubmit(f); window.closeModal(); }}>
        <I.Mail size={14}/> Send invitation
      </button>
    </div>
  );
}

function EditUserForm({ user, onSubmit }){
  const [f, setF] = useState({ name:user.name, email:user.email, role:user.role, dept:user.dept });
  return (
    <div style={{display:'grid',gap:10}}>
      <div className="field">
        <label>Name</label>
        <input className="input thai" value={f.name} onChange={e=>setF({...f,name:e.target.value})}/>
      </div>
      <div className="field">
        <label>Email</label>
        <input className="input" type="email" value={f.email} onChange={e=>setF({...f,email:e.target.value})}/>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
        <div className="field">
          <label>Role</label>
          <select className="select" value={f.role} onChange={e=>setF({...f,role:e.target.value})}>
            <option>Admin</option><option>Manager</option><option>Editor</option><option>Auditor</option><option>Viewer</option>
          </select>
        </div>
        <div className="field">
          <label>Department</label>
          <input className="input thai" value={f.dept} onChange={e=>setF({...f,dept:e.target.value})}/>
        </div>
      </div>
      <button className="btn primary" style={{justifyContent:'center',marginTop:6}}
              onClick={()=>{ onSubmit(f); window.closeModal(); }}>
        <I.Save size={14}/> Save changes
      </button>
    </div>
  );
}

function ChangePasswordForm(){
  const [p, setP] = useState({ cur:'', neu:'', conf:'' });
  const strength = (() => {
    const s = p.neu; let n = 0;
    if (s.length >= 8) n++; if (/[A-Z]/.test(s)) n++; if (/[0-9]/.test(s)) n++; if (/[^A-Za-z0-9]/.test(s)) n++;
    return n;
  })();
  const bars = ['#ef4444','#f59e0b','#eab308','#10b981'];
  const labels = ['Weak','Fair','Good','Strong'];
  const ok = p.cur && p.neu.length >= 8 && p.neu === p.conf;
  return (
    <div style={{display:'grid',gap:12}}>
      <div className="field">
        <label>Current password</label>
        <input className="input" type="password" value={p.cur} onChange={e=>setP({...p,cur:e.target.value})}/>
      </div>
      <div className="field">
        <label>New password</label>
        <input className="input" type="password" value={p.neu} onChange={e=>setP({...p,neu:e.target.value})}/>
        {p.neu && (
          <div style={{marginTop:6}}>
            <div className="row" style={{gap:4}}>
              {[0,1,2,3].map(i=>(
                <div key={i} style={{height:4,flex:1,borderRadius:4,background: i<strength?bars[strength-1]:'#eef1f8',transition:'.2s'}}/>
              ))}
            </div>
            <div style={{fontSize:11,color:'var(--muted)',marginTop:4}}>{strength>0 ? labels[strength-1]:''}</div>
          </div>
        )}
      </div>
      <div className="field">
        <label>Confirm password</label>
        <input className="input" type="password" value={p.conf} onChange={e=>setP({...p,conf:e.target.value})}/>
        {p.conf && p.neu !== p.conf && <div style={{fontSize:11,color:'#dc2626',marginTop:4}}>Passwords don't match</div>}
      </div>
      <button className="btn primary" style={{justifyContent:'center'}}
              disabled={!ok}
              onClick={()=>{ window.toast('Password changed', {tone:'success', title:'Updated'}); window.closeModal(); }}>
        <I.Lock size={14}/> Update password
      </button>
    </div>
  );
}

function PrefRow({ label, sub, on, onToggle, icon }){
  const Icon = I[icon] || I.Cog;
  return (
    <div className="row between" style={{padding:'12px 0',borderBottom:'1px solid var(--line)'}}>
      <div className="row" style={{gap:12}}>
        <div style={{width:36,height:36,borderRadius:10,background:'#f1f3fa',display:'grid',placeItems:'center',color:'#1f2a8e'}}>
          <Icon size={16}/>
        </div>
        <div>
          <div style={{fontWeight:700,fontSize:13}}>{label}</div>
          <div style={{fontSize:12,color:'var(--muted)',marginTop:2}}>{sub}</div>
        </div>
      </div>
      <div className={"toggle"+(on?' on':'')} onClick={onToggle}/>
    </div>
  );
}

window.SettingsView = SettingsView;