// Settings — Profile + Appearance (System / Light / Dark) + Danger zone
const Settings = ({ themeMode, onThemeMode }) => {
  const modes = [
    { id:'light', label:'Light', icon:'sun' },
    { id:'dark', label:'Dark', icon:'moon' },
    { id:'system', label:'System', icon:'monitor' },
  ];
  return (
    <div className="content" style={{maxWidth:720}}>
      <div style={{marginBottom:32}}>
        <div className="h1">Settings</div>
        <div className="muted" style={{fontSize:14, marginTop:4}}>Manage your account preferences</div>
      </div>

      {/* Profile */}
      <section className="card" style={{padding:24, marginBottom:20}}>
        <div className="h2" style={{marginBottom:4}}>Profile</div>
        <div className="muted" style={{fontSize:14, marginBottom:20}}>This is your public information</div>
        <div className="row" style={{gap:16, marginBottom:20}}>
          <Avatar name="Linh" size={56}/>
          <div>
            <div style={{fontSize:14, fontWeight:600}}>Linh Tran</div>
            <div className="muted" style={{fontSize:13}}>linh@example.com</div>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:16}}>
          <div><label className="label">Display name</label><input className="input" defaultValue="Linh Tran"/></div>
          <div><label className="label">Email</label><input className="input" defaultValue="linh@example.com" disabled style={{opacity:.6}}/></div>
        </div>
        <div className="row" style={{justifyContent:'flex-end'}}>
          <button className="btn btn-primary btn-sm">Save changes</button>
        </div>
      </section>

      {/* Appearance */}
      <section className="card" style={{padding:24, marginBottom:20}}>
        <div className="h2" style={{marginBottom:4}}>Appearance</div>
        <div className="muted" style={{fontSize:14, marginBottom:20}}>Choose how Trello Clone looks on this device</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12}}>
          {modes.map(m=>(
            <button key={m.id} onClick={()=>onThemeMode?.(m.id)} className="card" style={{
              padding:16, cursor:'pointer', textAlign:'left', background:'transparent',
              borderColor: themeMode===m.id ? 'var(--fg)' : 'var(--border-c)',
              borderWidth: themeMode===m.id ? 2 : 1, borderStyle:'solid',
              display:'flex', flexDirection:'column', gap:10
            }}>
              <Icon name={m.icon} size={18}/>
              <div style={{fontSize:14, fontWeight:600}}>{m.label}</div>
            </button>
          ))}
        </div>
      </section>

      {/* Danger zone */}
      <section className="card" style={{padding:24, borderColor:'hsl(var(--destructive) / .4)'}}>
        <div className="h2" style={{marginBottom:4, color:'hsl(var(--destructive))'}}>Danger zone</div>
        <div className="muted" style={{fontSize:14, marginBottom:20}}>Permanent actions cannot be undone</div>
        <div className="row between">
          <div>
            <div style={{fontSize:14, fontWeight:500}}>Delete account</div>
            <div className="muted" style={{fontSize:13}}>Remove all your boards, cards and account data</div>
          </div>
          <button className="btn btn-destructive btn-sm"><Icon name="trash" size={13}/> Delete</button>
        </div>
        <hr/>
        <div className="row between">
          <div>
            <div style={{fontSize:14, fontWeight:500}}>Sign out</div>
            <div className="muted" style={{fontSize:13}}>Sign out from this browser</div>
          </div>
          <button className="btn btn-outline btn-sm"><Icon name="logout" size={13}/> Sign out</button>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { Settings });