// Settings screen — account config
function SettingsScreen({ onBell, setTab }) {
  return (
    <div style={{ background: FA.bgSoft, minHeight: '100%', paddingBottom: 120, fontFamily: FA.sans }}>
      <AppHeader onBell={onBell} unread={2}/>
      <div style={{ padding: '4px 20px 14px' }}>
        <div style={{ fontSize: 28, fontWeight: 700, color: FA.ink, letterSpacing: -0.8 }}>Ajustes</div>
        <div style={{ fontSize: 13, color: FA.muted, marginTop: 3 }}>
          Tu cuenta, seguridad y preferencias
        </div>
      </div>

      {/* profile card */}
      <div style={{ padding: '0 16px 14px' }}>
        <Card pad={16}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 54, height: 54, borderRadius: 18, background: FA.heroGrad,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontSize: 20, fontWeight: 700, fontFamily: FA.sans,
              boxShadow: '0 6px 16px rgba(37,99,235,0.25)',
            }}>CM</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 15, fontWeight: 650, color: FA.ink }}>Camila Mendoza</div>
              <div style={{ fontSize: 12, color: FA.muted, marginTop: 2 }}>camila.m@correo.com</div>
              <div style={{ marginTop: 6, display: 'flex', gap: 6 }}>
                <Badge kind="info">Inversionista Verificado</Badge>
              </div>
            </div>
            <button style={{
              background: FA.bgSoft, border: 'none', width: 34, height: 34, borderRadius: 10,
              display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
            }}>
              <Icon name="pen" size={15} color={FA.inkSoft} strokeWidth={2}/>
            </button>
          </div>
        </Card>
      </div>

      <SettingsGroup title="Cuenta">
        <SettingRow icon="user"   label="Información personal" color={FA.blue}/>
        <SettingRow icon="shield" label="Verificación KYC"      color={FA.ok} detail="Completa"/>
        <SettingRow icon="wallet" label="Cuentas bancarias"     color={FA.skyDeep} detail="2"/>
        <SettingRow icon="docs"   label="Documentos fiscales"   color={FA.inkSoft} last/>
      </SettingsGroup>

      <SettingsGroup title="Seguridad">
        <SettingRow icon="lock" label="Cambiar contraseña" color={FA.ink}/>
        <SettingRow icon="sparkle" label="Firma digital" color={FA.blue} detail="Digital" last/>
      </SettingsGroup>

      <SettingsGroup title="Preferencias">
        <SettingRow icon="bell" label="Notificaciones" color={FA.warn} detail="Todas"/>
        <SettingRow icon="globe" label="Idioma"         color={FA.skyDeep} detail="Español" last/>
      </SettingsGroup>

      <SettingsGroup title="Soporte">
        <SettingRow icon="help" label="Centro de ayuda" color={FA.inkSoft}/>
        <SettingRow icon="logout" label="Cerrar sesión" color={FA.danger} last noChev/>
      </SettingsGroup>

      <div style={{ padding: '14px 16px 0', textAlign: 'center' }}>
        <div style={{ fontSize: 10.5, color: FA.muted, fontFamily: FA.mono }}>Factor Activo · v2.4.1</div>
      </div>
    </div>
  );
}

function SettingsGroup({ title, children }) {
  return (
    <div style={{ padding: '4px 16px 10px' }}>
      <div style={{
        padding: '10px 4px 8px',
        fontSize: 11.5, color: FA.muted, fontWeight: 600,
        textTransform: 'uppercase', letterSpacing: 0.6,
      }}>{title}</div>
      <Card pad={0}>{children}</Card>
    </div>
  );
}

function SettingRow({ icon, label, color, detail, toggle, toggled, noChev, last }) {
  const [on, setOn] = React.useState(!!toggled);
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12, padding: '13px 16px',
      borderBottom: last ? 'none' : '1px solid ' + FA.hairline,
      cursor: 'pointer',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 9,
        background: color + '18', display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon name={icon} size={16} color={color} strokeWidth={1.9}/>
      </div>
      <div style={{ flex: 1, fontSize: 13.5, color: FA.ink, fontWeight: 550 }}>{label}</div>
      {detail && (
        <span style={{ fontSize: 12, color: FA.muted, fontWeight: 500 }}>{detail}</span>
      )}
      {toggle ? (
        <button onClick={(e) => { e.stopPropagation(); setOn(!on); }} style={{
          width: 36, height: 22, borderRadius: 11, border: 'none',
          background: on ? FA.blue : '#cbd5e1', position: 'relative',
          cursor: 'pointer', transition: 'background .15s', padding: 0,
        }}>
          <div style={{
            position: 'absolute', top: 2, left: on ? 16 : 2,
            width: 18, height: 18, borderRadius: 9, background: '#fff',
            transition: 'left .15s',
            boxShadow: '0 1px 3px rgba(0,0,0,0.15)',
          }}/>
        </button>
      ) : !noChev && (
        <Icon name="chev" size={14} color={FA.muted} strokeWidth={2}/>
      )}
    </div>
  );
}

Object.assign(window, { SettingsScreen });